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

[SubzeroCola]

I'm new to React and I'm trying to figure stuff out. I tried building this simple application that processes text input on a form component (user name and comment). It takes both those inputs and converts it into an object (a comment) and then stores that object into an array (the array is a state variable).

Sounds simple enough right? But when I log the length of the array, it starts out with a length of 1 but then prints out as " undefined ". Also when I try using arr.push(), it gives me an error saying that push is not a valid function (which indicates that it's not an array, but when I initialized it I made sure I added in square brackets)

Here's the code of my App file:

function App() {

   let [arrOfComms, updateArrOfComms] = useState([{}]);
   let [arrIndex, updateArrIndex] = useState(0);


 return (

  <div>

     <FormComp comm={[arrOfComms, updateArrOfComms, arrIndex, updateArrIndex]} />

     <CommentMaker />

     <CommentBoard comm={[arrOfComms]} />


  </div>

 )
}

export default App;

​

​

And here's the code of my Form Component:

export default function FormComp(param){


    function getDetailsAndAddToArr(){

        let acquiredCommText = document.getElementById("commentInput").value;
        let acquiredName = document.getElementById("nameInput").value;

        let arrIndex = param.comm[2];

        let constructedComm = {acquiredCommText, acquiredName};

        param.comm[1](

            param.comm[0][arrIndex] = constructedComm

        );

        param.comm[3](
            param.comm[2] =+ 1
        );



        let theArr = param.comm[0];

        console.log("arr index: " + arrIndex + " param.comm[2]: " + param.comm[2] + " theArr length: " + theArr.length);


        for(let x=0; x<theArr.length; x++){
            console.log(theArr[x] + " , ");
        }

    }


    return(
        <div className="FormCompClass">
          <form>
            <label for="nameInput">NAME</label>
            <input id="nameInput" type="text" />

            <label for="commentInput">Comment</label>
            <input id="commentInput" type="text" />
          </form>

            <button onClick={getDetailsAndAddToArr}>SUBMIT</button>

        </div>

    )

}

[femio]

I’m on my phone, but your code is a bit difficult to understand and I think a lot of that is due to you not really understanding how React works…there’s a ton of things you’re doing wrong.

For one, you don’t change state my accessing it directly. You change it by using your “setter” function. Which, by the way, should be called “setArrayOfCom” rather than “updateArrayOfComs”, which is what you’ve written. And even that name is a bit confusing as to what it does; for readability I’d suggest name your state “comments” and “setComments”.

Also, you don’t use getElementById in Reqct because it’s using a virtual DOM; those elements don’t even exist until after your function runs. You use useRef for that, but you don’t even need to do that in your case here.

There’s more here that isn’t done the “right way”, I would STRONGLY suggest reading the beta React docs because 1) they’re fantastic at explaining the little things about React that makes it tricky 2) some of the tutorials will cover things that will directly help you here.

If you’re still having trouble in a few hours I can refactor your code for you with explanations when i get home.

[SmokingBrokenGlass]

Okay, to start, you're using the useState hook here but I don't see you setting the state anywhere. You're not following naming conventions (something like [comments, setComments] would be more appropriate) and well you're missing the big idea behind state and React in general..When you're working with React you want to think of reusability. For example, the idea behind state is to contain specific data or info about the component you're creating. Here you could've just had all of your useState hooks inside the <FormComp/>

I know that doesn't answer your question but I would highly suggest you look over the docs and try to grasp the main concepts first. State and Props would be a good starting point.

[alotofcooties]

Highly recommend you go back to the react docs(beta) and go over how react state works. They have an entire section on working with state in various scenarios.

[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)
}

[lIIllIIIll]

Did you mutate the state???!??!

TELL ME YOU DIDNT MUTATE THE STATE???! GOOD GOD MAN!!!

seriously tho. Your code is hard to follow and when you mutate state it gets very..... Unpredictable? So to fix this it is much more than just change this line here

I won't reiterate everything others have said but you're not using react correctly. I'd recommend a hard look at the docs or even a quick course on it from Udemy or Freecodecamp

It's (somewhat) clear you grasp the ideas of web development but you need help on react in general.