- Forums
- react
- V3 - React Usestate Update - Input Array With Objects 3 Level Nested
this example is for 3 dimension nested level array with objects [5234], Last Updated: Mon Jun 24, 2024
edwin
Thu Nov 23, 2023
0 Comments
218 Visits
Use this example to update the state with an input field to the array with object properties:
Source: /f/apachefriends/xampp/htdocs/noprem.com/LOGIN_VERSION/FULLSTACK/mdb-noprem-javascript
V4 : F:/apachefriends/xampp/htdocs/webune/quiz/frontend/reactV1/src/components/quiz/Index.jsx:41:84
setquizData(
{ ...quizData, factoryQuestion : {
...quizData.factoryQuestion, [dataquestionid]: {
...quizData.factoryQuestion[dataquestionid], options : {
...quizData.factoryQuestion[dataquestionid].options, [dataanswerid] :{
...quizData.factoryQuestion[dataquestionid].options[dataanswerid], answered:answered
}
}
}
}
}
);
updateFieldLocal Function
const updateFieldLocal = (e) => {
console.log(`LINE 90 e.target.value=`, e.target);
let dataindex = e.target.getAttribute('dataindex');
let fieldName = e.target.name;
let fieldValue = e.target.value;
setFormValue(
[
...formValue, formValue[dataindex][fieldName] = {
value: fieldValue
}
]
);
}
UseState Form Fields
const [formValue, setFormValue] = useState([
{ divider: "Reset Password", message: `Enter your email address below and we'll send you a link to reset your password.` },
{
email: {
errorMsg: 'Please enter a valid email.',
type: 'text',
label: 'Email address',
}
},
{
submit: {
value: 'Retrieve Password',
type: 'submit',
color: 'dark',
className: "mt-4",
size: 'lg'
},
},
]);
Input Field:
<MDBInput
value={formValue[1].email.value}
name={Object.keys(formValue[1])}
onChange={(e) => updateFieldLocal(e)}
dataindex={1}
/>