If I use formik, how can I write the correct value in the nested object?
P粉410239819
2023-08-17 16:26:31
<p>Given an array of fields that match the field names in the form object, I'm trying to write a nested value, but for some reason formik doesn't know how to write a nested value, this only works for the top level value< ;/p>
<p>I will leave a link to codesandbox in the comments</p>
<pre class="brush:php;toolbar:false;">export default function App() {
const form = useFormik({
initialValues: {
name: "",
login: "",
about: {
age: "",
rank: "",
car: {
name: "",
years: ""
}
}
}
});
const fields = [
{
name: { title: "Your name", fields: {} },
login: { title: "Your login", fields: {} },
about: {
title: "About",
fields: {
age: { title: "Your age", fields: {} },
rank: { title: "Your rank", fields: {} },
car: {
title: "Your car",
fields: {
name: { title: "Car name", fields: {} },
years: { title: "Car years", fields: {} }
}
}
}
}
}
];
const { values, handleChange } = form;
console.log("VALUES", values);
const itemsRender = (item, idx) => {
const key = Object.keys(item).at(-1);
return (
<div key={idx}>
<p>{item[key]?.title}</p>
<input
name={key}
value={values[key]}
onChange={handleChange}
placeholder={item[key].title}
/>
{!isEmpty(item[key]?.fields) && (
<div style={{ marginLeft: 20 }}>
{Object.entries(item[key]?.fields).map(itemsRender)}
</div>
)}
</div>
);
};
return <>{fields.map(itemsRender)}</>;
}</pre>
You need to update the
name
andvalue
properties to include the full path to the nested fieldYour code only handles one level of nesting.
For deeper nesting, you need to render and process the nested fields recursively
Finally, do not use
handleChange
to handle nested fields directly. Instead, use Formik'ssetFieldValue
to update the value of the nested field.You can access
setFieldValue
from the form object:codesandbox