'create a react input form with validation

I am working on react input form but the problem is don't know how to validate, also not getting value on onChange, please have a look at my code.

I have created an array which value I need to update using the input form

useEffect(() => {
    let arr = [];
    for (let i = 0; i < Number(localStorage?.getItem("users")); i++) {
      arr.push({
        username: localStorage.getItem("userName"),
        user_email: localStorage.getItem("userEmail"),
        password: "",
        button: "",
        designation: "",
        country: "",
        city: "", 
        company_name: "",
      });
    }
    setUserRemaining(arr);
  }, []);

then i have input form , which i want with validation

{userRemaining.map((element, index) => {
                  return (
                    <div className="block2">
                      <input type="text" name="username" value='' onChange={(event) =>  handleChange(event, index)}/>
                      
                      <div className="add" onClick={() => addUser(element, index)}>
                        <span>
                          <img src={img1} />
                        </span>
                        Add
                      </div>
                    </div>
                  );
                })}

at last, here is my handleChange method I've tried.

const handleChange = (event, index) => {
    const updatedUser = userRemaining.map((users, index1) => {
      if (index1 == index) {
        return {
          ...users,
          [event.target.name]: event.target.value,
        };
      } else {
        return users;
      }

for more details, I am providing a link to the file too.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source