1

I am using React and NextJS framework and my form is dynamically generated. I am using functional component. I am struggling to get the value from the dynamic generated state object. THis is my useState initial value:

const [formIsEmpty, setFormIsEmpty] = useState({});
const [inputs, setInputs] = useState({});

My code for the form is :

      ...
...
<ul onDragOver={(e) => e.preventDefault}>
  {items.map((item, idx) => (
    <li className={classes.courseinput} key={item}>
     {console.log("itemIdx", idx, item)}
     <div className="drag" draggable></div>
      <div>
       <select
         id={`course${item}`}
         name={`course${item}`}
         className="dropdown1 textTypeBody"
         onChange={handleChange}
         value={inputs.`.course${item}` || ""}
        >
        {courses.map((course, cIndex) => (
          <option key={cIndex} value={course.name}>
            {course.name}
          </option>
        ))}
       </select>
      </div>
      <div className="form-control">
        <input
          type="text"
          id={`description${item}`}
          name={`description${item}`}
          className={"textTypeBody"}
          placeholder="Description"
          onChange={handleChange}
          value={""}
         />
       </div>
       <div onClick={() => removeCourseHandler(item)}>
         {items.length > 1 && <RemoveIcon />}
       </div>
    </li>
   ))}
....

And this is the changehandler:

const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
console.log("Course handleChange event ", event, name, value);
if (value.trim() === "") {
   setFormIsEmpty({ ...formIsEmpty, [name]: true });
} else {
   setFormIsEmpty({ ...formIsEmpty, [name]: false });
    }
    setInputs((values) => ({ ...values, [name]: value }));

};

I have problem in getting the correct value from the inputs state at the select input tag value:

value={inputs.`.course${item}` || ""}

The console log for the inputs usestate is as below: enter image description here

Is there a correct way to get the value of the dynamic generated name ?

user2601660
  • 29
  • 10

0 Answers0