setState of multiple objects - React JS

Question

I'm having problems when I want to update the state of an array and I am using the push() method to add the new values but apparently push does not update, so I have doubts if I can make a setState of multiple values.

Here's the code with the push() method:

buildDetailDB = () => {
    let {detail} = this.state;
    //console.log(detail)
    let dms=[];
    detail.dms.map(fabric => {
      dms.push({
        "line_id": fabric.line_id,
        "id": fabric.id,
        "dm": fabric.dm,
        "priceWhite": fabric.priceWhite,
        "priceMedium": fabric.priceMedium,
        "priceDark": fabric.priceDark,
        "priceSpecial": fabric.priceSpecial,
        "priceWhiteC": 0,
        "priceMediumC": 0,
        "priceDarkC": 0,
        "priceSpecialC": 0,
        "Blong": this.FixElementValue(fabric.Blong),
        "Bwidth": this.FixElementValue(fabric.Bwidth),
        "fabricType": fabric.fabricType,
        "weightBWashOriginal": this.FixElementValue(fabric.weightBWashOriginal),
        "weightBWashCalculated": this.FixElementValue(fabric.weightBWashCalculated),
        "dm_width": this.FixElementValue(fabric.dm_width),
        "markerWidth": this.FixElementValue(fabric.markerWidth),
        "dm_pt": fabric.dm_pt,
        "yieldydslbs": this.FixElementValue(fabric.yieldydslbs),
        "markerEfficiency": this.FixElementValue(fabric.markerEfficiency),
        "markerLong": this.FixElementValue(fabric.markerLong),
        "pieceByMarker": this.FixElementValue(fabric.pieceByMarker),
        "lbsunit": this.FixElementValue(fabric.lbsunit),
        "lbsunitwaste": this.FixElementValue(fabric.lbsunitwaste),
        "sqinchunit": this.FixElementValue(fabric.sqinchunit),
        "ydsunit": fabric.ydsunit,
        "bydspunit": this.FixElementValue(fabric.bydspunit),
        "blbspunit": this.FixElementValue(fabric.blbspunit),
      })
      console.log(fabric)
      return fabric;
    });

push modifies state directly. It's also odd that you're mapping and ignoring the result; build the DM and return it--that's what map is for. — Dave Newton
– Dave Newton, Commented May 2, 2022 at 16:02

dabyland · Accepted Answer · 2022-05-04 19:59:21Z

2

I'm not entirely sure what the rest of your detail state looks like but I'm assuming it's an array of objects. Instead of destructuring your detail from state and performing updates that way, you can utilize the prevState callback that setState() offers.

The following below should pretty much get you there.

buildDetailDB = () => {
  this.setState(prevState => ({
    detail: [
      ...prevState.detail,
      {
        dms: prevState.detail.dms.map((fabric) => ({
          line_id: fabric.line_id,
          id: fabric.id,
          dm: fabric.dm,
          priceWhite: fabric.priceWhite,
          priceMedium: fabric.priceMedium,
          priceDark: fabric.priceDark,
          priceSpecial: fabric.priceSpecial,
          priceWhiteC: 0,
          priceMediumC: 0,
          priceDarkC: 0,
          priceSpecialC: 0,
          Blong: this.FixElementValue(fabric.Blong),
          Bwidth: this.FixElementValue(fabric.Bwidth),
          fabricType: fabric.fabricType,
          weightBWashOriginal: this.FixElementValue(fabric.weightBWashOriginal),
          weightBWashCalculated: this.FixElementValue(
            fabric.weightBWashCalculated
          ),
          dm_width: this.FixElementValue(fabric.dm_width),
          markerWidth: this.FixElementValue(fabric.markerWidth),
          dm_pt: fabric.dm_pt,
          yieldydslbs: this.FixElementValue(fabric.yieldydslbs),
          markerEfficiency: this.FixElementValue(fabric.markerEfficiency),
          markerLong: this.FixElementValue(fabric.markerLong),
          pieceByMarker: this.FixElementValue(fabric.pieceByMarker),
          lbsunit: this.FixElementValue(fabric.lbsunit),
          lbsunitwaste: this.FixElementValue(fabric.lbsunitwaste),
          sqinchunit: this.FixElementValue(fabric.sqinchunit),
          ydsunit: fabric.ydsunit,
          bydspunit: this.FixElementValue(fabric.bydspunit),
          blbspunit: this.FixElementValue(fabric.blbspunit),
        })),
      },
    ],
  }));
};

@eduardorh1312 Added that prevState callback parameter.

edited May 4, 2022 at 19:59

answered May 2, 2022 at 15:59

dabyland

3534 silver badges8 bronze badges

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

2 Comments

eduardorh1312 Over a year ago

where did you initialize the prevstate?, it throws me an non existing error

dabyland Over a year ago

Apologies, missed adding that callback parameter. Check my edit for the working version.

WebbH · Accepted Answer · 2022-05-02 16:04:22Z

Or another way would be to just do what you did and set the state at the end of pushing

buildDetailDB = () => {
let {detail} = this.state;
//console.log(detail)
let dms=[];
detail.dms.forEach(fabric => {
  dms.push({
    "line_id": fabric.line_id,
    "id": fabric.id,
    "dm": fabric.dm,
    "priceWhite": fabric.priceWhite,
    "priceMedium": fabric.priceMedium,
    "priceDark": fabric.priceDark,
    "priceSpecial": fabric.priceSpecial,
    "priceWhiteC": 0,
    "priceMediumC": 0,
    "priceDarkC": 0,
    "priceSpecialC": 0,
    "Blong": this.FixElementValue(fabric.Blong),
    "Bwidth": this.FixElementValue(fabric.Bwidth),
    "fabricType": fabric.fabricType,
    "weightBWashOriginal": this.FixElementValue(fabric.weightBWashOriginal),
    "weightBWashCalculated": this.FixElementValue(fabric.weightBWashCalculated),
    "dm_width": this.FixElementValue(fabric.dm_width),
    "markerWidth": this.FixElementValue(fabric.markerWidth),
    "dm_pt": fabric.dm_pt,
    "yieldydslbs": this.FixElementValue(fabric.yieldydslbs),
    "markerEfficiency": this.FixElementValue(fabric.markerEfficiency),
    "markerLong": this.FixElementValue(fabric.markerLong),
    "pieceByMarker": this.FixElementValue(fabric.pieceByMarker),
    "lbsunit": this.FixElementValue(fabric.lbsunit),
    "lbsunitwaste": this.FixElementValue(fabric.lbsunitwaste),
    "sqinchunit": this.FixElementValue(fabric.sqinchunit),
    "ydsunit": fabric.ydsunit,
    "bydspunit": this.FixElementValue(fabric.bydspunit),
    "blbspunit": this.FixElementValue(fabric.blbspunit),
  })
  this.setState({detail: {...detail, dms}})
});

Collectives™ on Stack Overflow

setState of multiple objects - React JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related