0
449
ViewsHow to remove nested object by Id from Formik?
I am trying to remove an entire flight item from a nested array. I've tried setFieldvalue. Whenever I find a specific ID, i'd like to remove the entire item from Formik. For some reason the internet is sparse with solutions, even on SO.
console.log("Formik", formik.values.flightsById);
for (let item in formik.values.flightsById){
if(item === 'EF_700001132'){
console.log("it's here: ", item)
// React.useEffect(() => () => formik.setFieldValue(item, undefined), [])
//formik.values.flightsById.remove
}
}
console.log("Formik after del: ", formik.values.flightsById);
Console.log() results:
ยท
Juan Pablo Isaza
1 answers
Answer question0
Some feedback:
- You referred to
flightsByIdas a "nested array", but judging from your screenshot it's an object - You have the right idea by using
setFieldValue()to updateflightsById, nice work ๐ - Placing a useEffect inside an
ifstatement will trigger an error because it breaks the rules of hooks - If you want to completely remove they key
EF_700001132from theflightsById, you will need to cloneflightsByIdexcept for that key, and then pass it intosetFieldValue(). I used the rest operator (...otherFlights) to copy it without the key, but there's plenty of other methods detailed in other SO threads.
Here is an example of deleting a single flight when a button is clicked:
<button
type="button"
onClick={() => {
const { EF_700001132, ...otherFlights } = formik.values.flightsById;
formik.setFieldValue("flightsById", otherFlights);
}}
>
Delete Flight EF_700001132
</button>
ยท
Juan Pablo Isaza
Report
Answer question