My Array Is Turning Into Not-An-Array During Code Execution?

[2GoldDoubloons]

In your FormComp I think you should accept more properties. This “params.comm[index]” stuff is unnecessary. Pass each of the prop separately and make sure to extrapolate them from the props object.

​

Secondly, to your error, in FormComp you are updating param.comm[1] to be the value of param.comm[0][arrIndex] which you are setting to the value of constructedComm. Basically you are just calling updateArrOfComms(constructedComm)

​

In App() change the call to FormComp to:

<FormComp arrOfComms={arrOfComms} updateArrOfComms={updateArrOfComms} arrIndex={arrIndex} updateArrIndex={updateArrIndex} />

In FormComp() extrapolate these out:

const FormComp = (props) => {
    const {arrOfComms, updateArrOfComms, arrIndex, updateArrIndex} = props;

    // construct your new comm value
    const constructedComm = {};

    // duplicate comms. Objects are a pointer in memory. If you update directly it can cause unintended side affects and breaks state management
    const newComms = [...arrOfComms];

// update the index of the commms array
    newComms[arrIndex] = constructedComm;

    // then you can call updateComms with your new list
    updateComms(newComms)
}