cannot push an item to an item array within state

Question

How to push an item to an item array within state.The Addcartbutton component adds a new item to state.items.But each time when i add new item the state.items is not updated. `

    import React from 'react';
    import Addtocartbutton from '../component/addcart';
    import Cart from '../component/cartlist';
    export default class Product extends React.Component {

    constructor() {
        super();
        this.state = {
            items: [],
            total: 0,
            currency: 'INR'
        }
        this.addtocart = this.addtocart.bind(this);
    }

    addtocart(data) {
        console.log(data);
        this.setState({
            items:[this.state.items,data]
        })
        console.log(this.state.items);
    }

    render() {
        var list = this.props.dataname;
        return (
            <div className="card hoverable">
                <div className="card-image">
                    <img src={list.image} alt={list.name} className='shop-img' />
                </div>
                <div className="card-content">
                    <span className="card-title blue-text text-darken-2">{list.price}&nbsp;{list.currency}</span>
                    <p>{list.name}</p>
                </div>
                <Addtocartbutton  onClick={this.addtocart.bind(this,list)} />
            </div>
        )
        return(
        <Cart datalist={this.props.items}/>
       )
      };


     }

Tried this.state.items.push() but dosen't seems to work at all.Also how to pass item array as a props to Cart component from Product component.

import React from 'react';

export default class Cart extends React.Component {

    render() {
        let p = this.props.datalist;
        console.log(p);
        return (
            <ul className="collection">
                <li className="collection-item avatar">
                    <img src="#" alt="" className="circle" />
                    <span className="title">dfdfd</span>
                    <a href="#!" className="secondary-content"><i className="material-icons">grade</i></a>
                </li>
            </ul>
        )
    }
}

Piyush Patel · Accepted Answer · 2018-05-01 05:19:10Z

1

Try this it may help

addtocart(data) {
    console.log(data);
    let items = this.state.items.slice();
    items.push(data);
    this.setState({
        items:items
    }, ()=> {
      console.log(this.state.items);
    })
    
}

Steps of method

1- first i create a new variable from this.state.items.slice() which will return new array instance.

2- simply push the data into the array and set the state of items

3- Arrays are reference type in javascript, to update the state you have to pass a new array thus I am passing the new items array (let items = this.state.items.slice();)

answered May 1, 2018 at 5:19

Piyush Patel

1,24015 silver badges19 bronze badges

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

Comments

Milos Mosovsky · Accepted Answer · 2018-05-01 04:02:25Z

0

you can't mutate directly as this.state.push but you need to extend the object

 addtocart(data) {
        console.log(data);
        this.setState(prevState => ({
            items:[...prevState.items, data]
        }))
    }

Example code:

edited May 1, 2018 at 4:02

answered May 1, 2018 at 3:43

Milos Mosovsky

3,0031 gold badge18 silver badges18 bronze badges

16 Comments

Jayce444 Over a year ago

"doesn't work" isn't helpful. What specifically is the issue when you try it? The exact issue, error messages, etc.

Jayce444 Over a year ago

For Milos' answer, you'll need to have the proper plugin for transpiling the spread/rest operator

lx6002 Over a year ago

prevState = this.state.items; this.setState(prevState => ({ items:[prevState,data] })) is this correct ??

lx6002 Over a year ago

only one item is present within the items array.Still the array is not getting updated after each click.

Jayce444 Over a year ago

No because you're setting the old state EQUAL to the new one. You need to create a copy of old state values you use if they are arrays/objects. Try something like this.setState({items:this.state.items.slice().concat(data)})

|

Jordan Daniels · Accepted Answer · 2018-05-01 04:26:10Z

0

I believe the issue is with the onClick on the addtocartbutton component. Just have the onClick function as <Addtocartbutton onClick={this.addtocart(list)} /> and follow the code given by Milos. (I wish I could comment on the first answer, but I do not have enough reputation).

Also, the addtocart method is already bound in the constructor, so there is no need to bind it again.

answered May 1, 2018 at 4:26

Jordan Daniels

5,3241 gold badge23 silver badges29 bronze badges

Comments

Galeel Bhasha · Accepted Answer · 2018-05-01 05:13:43Z

0

As addtocart is already binded in the constructor, no need to bind it again. so update your code as below.

<Addtocartbutton onClick={this.addtocart(list)} />

and update your addtocart method as shown below. (I have used closure concept here)

addtocart(data) {
  return function() {
    this.setState(prevState => ({
        items:[...prevState.items, data]
    }))
  }.bind(this)  
}

or use the below code which uses the arrow functions.

addtocart = data => () => {
    this.setState(prevState => ({
      items: [...prevState.items, data]
    }));
  };

answered May 1, 2018 at 5:13

Galeel Bhasha

1,90513 silver badges19 bronze badges

Collectives™ on Stack Overflow

cannot push an item to an item array within state

4 Answers 4

Comments

16 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

16 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related