How to remove nested object by Id from Formik?

Question

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:

Answer 1

Some feedback:

• You referred to flightsById as a "nested array", but judging from your screenshot it's an object
• You have the right idea by using setFieldValue() to update flightsById , nice work 😉
• Placing a useEffect inside an if statement will trigger an error because it breaks the rules of hooks
• If you want to completely remove they key EF_700001132 from the flightsById , you will need to clone flightsById except for that key, and then pass it into setFieldValue() . 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>

Live Demo