Adding an object to the array React; "TypeError: Cannot read property 'push' of undefined"

Question

Expected effect: click button -> call function add -> add object this.color to array products- property colors in component App. Example: colors: [{color:" green "}, {color:" black "}] -> colors: [{color: "green"}, {color: "black"}, {color: "red "}]

Error: TypeError: Cannot read property 'push' of undefined

App

class App extends React.Component {
  state = {
    products: [
      { id: 0, colors: [{color:"green"}, {color:"black"}], desc: "some desc" },
      { id: 1, colors: [{color:"yellow"}, {color:"purple"}], desc: "some desc1" }
    ],
    index: null
  };


  add = (newColor) => {
    let newProducts = [...this.state.products]
    newProducts[index].colors.push(newColor);
    this.setState({products: newProducts});
  }

   select = (index) => {
    this.setState({
      index: index
    })
  }


  render() {
    <div>
      <ul>
        {
          this.state.products.map((product, index) => (
            <Product
              key={product.id}
              product={product}
              select={() => this.select(index)}
            />
          ))
        }
      </ul>
      <Details
        add={this.add}
      />
    </div>
  }
}

Details

class Details extends React.Component {

  click1 = () => {
      this.color = {
          color: 'red'
      }

      this.props.add(this.color);
  }



  render() {
    <div>
        <button onClick={this.click1}></button>
    </div>
  }
}

Danny Delott · Accepted Answer · 2019-06-18 01:54:21Z

2

Change this line:

newProducts[this.state.index].colors.push(newColor);

But also, you should use the callback pattern for setState if you're going to set state based on previous state, so:

this.setState(prevState => {
  let newProducts = [...prevState.products];
  newProducts[prevState.index].colors.push(newColor);
  return {products: newProducts};
});

edited Jun 18, 2019 at 1:54

answered Jun 18, 2019 at 0:26

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

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

2 Comments

Umbro Over a year ago

Do I have to use newProducts[prevState.index] ? Is it necessary? Maybe it should be: newProducts[this.state.index] ? Look at user Orar's answer

Danny Delott Over a year ago

Calls to setState are batched, so relying on this.state.index may not be what you think it is when the update is applied.

Orar · Accepted Answer · 2019-06-18 01:17:15Z

0

Your index is undefined. So it's accessing an array element of index undefined.

 const arr = [3, 2]
 arr[undefined] === undefined // true

So I will

 add = (newColor) => {
   const { index } = this.state;

   if (index) {
     this.setState(prevState => {
       const newProducts = [...prevState.products];
       newProducts[index].colors.push(newColor);

       return { products: newProducts };
     });
   }
 }

answered Jun 18, 2019 at 1:17

Orar

9581 gold badge10 silver badges13 bronze badges

1 Comment

Umbro Over a year ago

Maybe should be: newProducts[prevState.index] ?

Collectives™ on Stack Overflow

Adding an object to the array React; "TypeError: Cannot read property 'push' of undefined"

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related