How can I insert into React's state array with setState?

Question

I\'m looking to modify and array in react and insert elements on specific index. This is how my state looks like:

this.state = {arr: [\'\', \'\', \'\', \'\' ]}
<         


        

Answer 1

Immer is a common dependency to help with this kind of thing. In this example, you would do something like

import {useImmer} from "use-immer"

export default function MyComponent(props) {
   const [state, setState] = useImmer({arr: ['', '', '', '' ]})

   // .... some time later

   setState(draft => {
       draft.arr[index] = newValue
   })
}

And Immer will take care of making sure that your state is updated immutably and correctly.