Filter an Object Array and set to state Array variable

Question

This is the JSON Input that I am going to filter by orderId and then set to the state variable.

[{"orderId":3,"userId":3,"firstName":"Amal","lastName":"kankanige","contactNo":"011-3456787","status":"pending","deliveryAddress":"No:24/c,Anders Road,Wijerama,Wijerama,Srilanka","productName":"Apple","quantity":2,"total":100.0,"id":null,"order_date":"2019-01-31 10:28:29"}]

this is my state.

  this.state = {
      merchentOrders: [],
      filterMerchentOrders: []
    }

//this is the method

when I am filtering by orderId it's successfully working and then I want to set the filtered output to " this.setState({filterMerchentOrders: filterMerchentOrdersX});". when I console out the state as below the values are not set.

getOrderDetails = id => {

    console.log("id ==" ,id);

    let filterMerchentOrdersX = this.state.merchentOrders.filter(value => {
      return (
        value.orderId.toString()
          .indexOf(id) !== -1

      );
    });         

    this.setState({filterMerchentOrders: filterMerchentOrdersX});

   //this is working  

     console.log("filterMerchentOrdersX ==" ,filterMerchentOrdersX);       

   //this gives an empty array  

      console.log("this.state.filterMerchentOrders ==" ,this.state.filterMerchentOrders);
  };

Possible duplicate of Why calling react setState method doesn't mutate the state immediately? — adiga
– adiga, Commented Jun 3, 2019 at 9:26
Perharps try this: setState( { filterMerchentOrdersX }, () => console.log(this.state) ); — Akinjiola Toni
– Akinjiola Toni, Commented Jun 3, 2019 at 9:28

Tenusha Guruge · Accepted Answer · 2019-06-03 09:40:34Z

1

It might be the reason that setState runs asynchronusly, when you console.log the value state might not be updated.

To view the state after it updates, you can pass a callback function.

this.setState({filterMerchentOrders: filterMerchentOrdersX},()=>{
   console.log("this.state.filterMerchentOrders ==" ,this.state.filterMerchentOrders);
})

answered Jun 3, 2019 at 9:40

Tenusha Guruge

2,3503 gold badges21 silver badges39 bronze badges

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

Comments

Omer Khan · Accepted Answer · 2019-06-03 09:31:51Z

0

you've written console.log() immediately after setState method, since setState is an async method an at the time java script runs your console.log it will be showing you the previous state in which obviously array is not set, for this you should put your console in the second argument of setState that is a callback function.

this.setState({[event.target.name]: event.target.files[0]},()=>console.log(this.state));

or you can simply user async await.

answered Jun 3, 2019 at 9:31

Omer Khan

4572 silver badges8 bronze badges

Comments

Akinjiola Toni · Accepted Answer · 2019-06-03 09:34:30Z

0

Since you're using the ES6 syntax, your function could be shorter and neater. But it seems to me that you're not doing anything wrong

getOrderDetails = id => {
    const filterMerchentOrders = this.state.merchentOrders.filter(
     value => value.orderId.toString().indexOf(id) !== -1
    );
    this.setState({filterMerchentOrders});
}

answered Jun 3, 2019 at 9:34

Akinjiola Toni

6787 silver badges9 bronze badges

Collectives™ on Stack Overflow

Filter an Object Array and set to state Array variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related