import React, { useState } from "react";
import "./AddUser.css"; import { validate, validatorRequire, validatorNumber, } from "../../shared/util/validator"; import { Link } from "react-router-dom"; import * as userService from "./service";
const AddUser = () => { const [formState, setFormaState] = useState({ errors: [], users: [], }); // class addUser extends Component { // componentDidMount() { // userService // .getUsers() // .then((response) => this.setFormaState({ users: response.data })); // } // } // componentDidMount() {
// } const addUserSubmitHandler = (event) => { event.preventDefault(); const errors = validateForm();
if (errors.length) { alert("gikhare sag"); setFormaState({ ...formState, errors }); return; } userService.addUser(formState.user); setFormaState({ errors: [], users: userService.getUsers() });
};
const validators = { code: [validatorRequire(), validatorNumber()], fname: [validatorRequire()], lname: [validatorRequire()], phone: [validatorRequire(), validatorNumber()], fee: [validatorRequire(), validatorNumber()], };
const farsiNames = { code: "کد", fname: "نام", lname: "نام خانوادگی", phone: "شماره تماس", fee: "دستمزد", };
const changeHandler = (e) => { const user = {}; const name = e.target.name; const value = e.target.value; user[name] = value; const errors = validate(value, validators[name], farsiNames[name]); setFormaState({ ...formState, user: { ...formState.user, ...user }, errors, }); }; const validateForm = () => { let errors = []; const fields = Object.keys(farsiNames); for (let field of fields) { const fieldErrors = validate( formState.user ? formState.user[field] : undefined, validators[field], farsiNames[field] ); errors = errors.concat(fieldErrors); }
return errors;
return (
<input element="input" type="text" id="fname" name="fname" className="fname form-control m-2 col-md-2 d-block" placeholder="نام" onChange={changeHandler} /> <input element="input" type="text" id="lname" name="lname" className="lname form-control m-2 col-md-2 " placeholder="نام خانوادگی" onChange={changeHandler} /> <input element="input" type="text" id="phone" name="phone" className="phone form-control m-2 col-md-3" placeholder="شماره تماس" onChange={changeHandler} /> <input element="input" type="text" id="fee" name="fee" className="fee form-control col-md-3 m-2 p-3" placeholder="دستمزد" validators={[validatorRequire]} onChange={changeHandler} /> </div> <button className="btn btn-success mx-auto d-block mt-5"> اضافه کردن </button> <div className="container mt-5"> <table className="table table-striped"> <thead> <tr> <th scope="col">ردیف</th> <th scope="col">{farsiNames.code}</th> <th scope="col">{farsiNames.fname}</th> <th scope="col">{farsiNames.lname}</th> <th scope="col">{farsiNames.phone}</th> <th scope="col">{farsiNames.fee}</th> </tr> </thead> <tbody> {formState.users.map((user, index) => { return ( <tr key={index}> <th scope="row">{index + 1}</th> <td>{user.code}</td> <td>{user.fname}</td> <td>{user.lname}</td> <td>{user.phone}</td> <td>{user.fee}</td> <td> <Link to={"/userfee/" + user.code}> <span role="button" className="btn btn-primary btn-sm"> Edit </span> </Link> </td> </tr> ); })} </tbody> </table> </div> </form>
); }; export default AddUser;
error = react-dom.development.js:11102 Uncaught TypeError: formState.users.map is not a function at AddUser (AddUser.js:157)
Please ask this question on stackoverflow
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
hello please help me for this error
import React, { useState } from "react";
import "./AddUser.css";
import {
validate,
validatorRequire,
validatorNumber,
} from "../../shared/util/validator";
import { Link } from "react-router-dom";
import * as userService from "./service";
const AddUser = () => {
const [formState, setFormaState] = useState({
errors: [],
users: [],
});
// class addUser extends Component {
// componentDidMount() {
// userService
// .getUsers()
// .then((response) => this.setFormaState({ users: response.data }));
// }
// }
// componentDidMount() {
// }
const addUserSubmitHandler = (event) => {
event.preventDefault();
const errors = validateForm();
};
const validators = {
code: [validatorRequire(), validatorNumber()],
fname: [validatorRequire()],
lname: [validatorRequire()],
phone: [validatorRequire(), validatorNumber()],
fee: [validatorRequire(), validatorNumber()],
};
const farsiNames = {
code: "کد",
fname: "نام",
lname: "نام خانوادگی",
phone: "شماره تماس",
fee: "دستمزد",
};
const changeHandler = (e) => {
const user = {};
const name = e.target.name;
const value = e.target.value;
user[name] = value;
const errors = validate(value, validators[name], farsiNames[name]);
setFormaState({
...formState,
user: { ...formState.user, ...user },
errors,
});
};
const validateForm = () => {
let errors = [];
const fields = Object.keys(farsiNames);
for (let field of fields) {
const fieldErrors = validate(
formState.user ? formState.user[field] : undefined,
validators[field],
farsiNames[field]
);
errors = errors.concat(fieldErrors);
}
};
return (
{formState.errors.map((error, index) => (
{error}
))}
element="input"
type="text"
id="code"
name="code"
className="code form-control m-2 col-md-1 d-block"
placeholder="کد"
onChange={changeHandler}
/>
);
};
export default AddUser;
error = react-dom.development.js:11102 Uncaught TypeError: formState.users.map is not a function
at AddUser (AddUser.js:157)
Please ask this question on stackoverflow