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 ?