How to push React component to an array?

Question

I'm trying to push a new component to an array that holds other equal components. My parent component is receiving that array from the server and renders it.

I logged this action and in the console, there is a new value but I don't see the new component on the screen.

Parent Component:

state = {
  meetingsArr: [
    {
      id: 1,
      metName: "driving lesson",
      metTime: "45 min",
      setTime: "10 min",
      metCost: "100",
      metInfo: "some text"
    }
  ]
};

addMeetting = () => {
  this.state.meetingsArr.push(<SingleMetting />);
  console.log(this.state.meetingsArr);
};

render() {
  const { meetingsArr } = this.state;
  return (
    <div>
      {meetingsArr.map(item => (
        <SingleMetting key={item.id} data={item} />
      ))}

      <div className="new-met">
        <button className="btn" onClick={this.addMeetting}>
          create a new metting
        </button>
      </div>
    </div>
  );
}

Tudor Constantin · Accepted Answer · 2019-12-10 06:58:37Z

2

you should use setState(...) to modify the state:

addMeetting = () => {
    const newMeeting = {
        id: 2,
        metName: 'whatever',
        metTime: 'whatever',
        setTime: 'whatever',
        metCost: 'whatever',
        metInfo: 'some other text'
    }
    this.setState({meetingsArr: [...(this.state.meetingsArr ||[]), newMeeting]})
}

answered Dec 10, 2019 at 6:58

Tudor Constantin

26.9k7 gold badges54 silver badges73 bronze badges

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

Comments

Ernesto · Accepted Answer · 2019-12-10 08:43:07Z

0

Accessing the state inside the setState function is an anti pattern, because the fact that setState function/method is an async process. The “correct way” to update the state using the state 🤯 what ?? Well just use the callback function

state = {
 myArr: []
}
....
methodHandler () {
 this.setState(prevState => ({myArr: [...prevState.myArr,  {
        id: 2,
        metName: 'whatever',
        metTime: 'whatever',
        setTime: 'whatever',
        metCost: 'whatever',
        metInfo: 'some other text'
    }]});

answered Dec 10, 2019 at 8:43

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

2 Comments

Raz Over a year ago

Hey Ernesto, I understand what you're saying but this solution doesn't work :/

Ernesto Over a year ago

take a look to my exampre here: codepen.io/jaraolveda/project/editor/DaJYMY

Collectives™ on Stack Overflow

How to push React component to an array?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related