handling state during onChange event, aray of mutiple objects , and objects with multiple key Value pair, dunring onChange how to handling and update the state with out overwrite any object or value of objects
// state exits with array of multiple objects and objects with multiple key value pairs.
const [employement, setEmployement] = useState([{title:"react_js", exp:"good", id:1}, {title:"laravel", exp:"master", id:2}, {title:"node_js", exp:"well", id:3},{title:"flutter", exp:"mid", id:4}])
// method to change the input value
const handleChange =(id, inputValue)=>{
// need help how to change the single value , without any over in object value and without overRIght whole object in an array .
employement.filter((emp) => {
if (emp.id === id) {
setEmployement([{ ...emp, job_title: inputValue }]);
}
});
// but upper logic not working correctly, this code need improvement
}
// map method to iterate the array
employement.map(singleEmp=>{
<input type="text" value={singleEmp.title} onChange={(e)=>handleChange(singleEmp.id, e.target.value)}/>
})
// last this is dummy structure of my real code, real code is long enough but same as it, thank you for your any suggestions
Try this as your handleChange method
// method to change the input value
const handleChange = (id, inputValue) => {
setEmployement((prevstate) => {
return employement.map((emp) => {
if (emp.id === id) {
return { ...emp, title: inputValue };
}
return emp;
});
});
};
Code sandbox => https://codesandbox.io/s/nice-greider-0efof?file=/src/App.js