React doesn't render all components of array

Question

I want to dynamically add Components, after clicking the "add" button. For that, I created an array that consists of all the components, and add them on click.

My problem is, that it only renders one component, even though it consists of several ones.

My code looks like this:

class QuestionBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {answersArray: []};
    }

    addPossibleAnswer() {
        this.state.answersArray.push(
            <PossibleAnswers id={this.state.answersArray.length + 1}/>
        )
        this.forceUpdate();
    }

    componentWillMount() {
        this.state.answersArray.push(
            <PossibleAnswers id={this.state.answersArray.length + 1}/>
        )
    }

    render() {
        console.log(this.state.answersArray) // Grows after adding componenets, but they are not rendered.
        return (
            <div>
                {this.state.answersArray}
                <AddPossibleAnswer addPossibleAnswer={() => this.addPossibleAnswer()} />
            </div>
        );
    }
}

If you see what I did wrong, I'd be really glad if you could help me out!

Its because you're mutating the state.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2018-11-03 14:56:35 +00:00
Commented Nov 3, 2018 at 14:56 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Nov 3, 2018 at 14:56

Tholle · Accepted Answer · 2018-11-03 15:02:04Z

1

Instead of mutating state directly and adding JSX to it, you can instead keep raw data in your state and derive the JSX from that in the render method instead.

Example

class QuestionBlock extends React.Component {
  state = { answers: 1 };

  addPossibleAnswer = () => {
    this.setState(({ answers }) => ({ answers: answers + 1 }));
  };

  render() {
    return (
      <div>
        {Array.from({ length: this.state.answers }, (_, index) => (
          <PossibleAnswers key={index} id={index} />
        ))}
        <AddPossibleAnswer addPossibleAnswer={this.addPossibleAnswer} />
      </div>
    );
  }
}

answered Nov 3, 2018 at 15:02

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robin Over a year ago

Hey, thanks for that neat solution! 2 short questions if it's alright. What is the reason to put the _ in the arrow function? I removed it and it worked just as fine. And if I wanted to delete a component by its id, could I somehow filter inside of Array.from(), or would that approach not work then?

Tholle Over a year ago

@Robin You're welcome! The function that is the second argument of Array.from gets the element and index as arguments, and only the index was used, so I used _ to indicate that it was not used. It will be difficult to remove by id in this particular example since it just loops answers amount of times. If you want to remove by id you will need some more complex data, e.g. state = { answers: [{ id: 3453 }, { id: 4624 }] }

Robin Over a year ago

Nice, I understand. Will try that out!

Daniel Hilgarth · Accepted Answer · 2018-11-03 15:02:03Z

1

You don't interact with state like you do. Never mutate the state field. You need to use this.setState:

this.setState(prevState => ({answersArray: prevState.answersArray.concat([
      <PossibleAnswers id={prevState.answersArray.length + 1}])}));

Having said that, it is also strange that you store components in state. Usually, you would store data and create the components based on the data in the render method.

edited Nov 3, 2018 at 15:02

answered Nov 3, 2018 at 14:56

Daniel Hilgarth

175k41 gold badges346 silver badges450 bronze badges

Comments

Hemadri Dasari · Accepted Answer · 2018-11-03 15:24:42Z

1

You are directly pushing elements to the array without setState so the component won't re-render

Also avoid using tthis.forceUpdate() as much as you can in your application because this is not recommended much

You need to change your code like below. The recommended approach for dealing with arrays in react is using previous state and push to an array

addPossibleAnswer() {
       this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
    }

componentWillMount() {
    this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
}

Also keep in mind that componentWillMount life cycle method is deprecated in react 16. So move the code to componentDidMount instead

Here is the corrected code

class QuestionBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {answersArray: []};
    }

    addPossibleAnswer() {
       this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
    }

  componentDidMount() {
    this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
  }

    render() {
        const { answersArray } = this.state;
        return (
            <div>
                {answersArray}
                <AddPossibleAnswer addPossibleAnswer={() => this.addPossibleAnswer()} />
            </div>
        );
    }
}

edited Nov 3, 2018 at 15:24

answered Nov 3, 2018 at 15:11

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

2 Comments

Robin Over a year ago

Hey, also thanks for your solution :) Isn't ComponentWillMount something completely different than ComponentDidMount? I thought I need to use "Will" because it needs to put the data in the array, before it renders

Hemadri Dasari Over a year ago

yes componentWillMount gets called before the component but this life cycle method is deprecated and not recommended to use so moving the logic to componentDidMount would work too but it just that this method gets called after first render. But there is no impact in your component

Collectives™ on Stack Overflow

React doesn't render all components of array

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related