React update state array object single property

Question

I have the following method:

  addWidget = (index) => {
    var currentState = this.state;

    if(currentState.availableWidgets[index].pos === 'start'){

      // add it at the start
      for(var i = 0; i < currentState.widgets.length; i++){
        this.setState({
          widgets: [
            ...currentState.widgets,
            currentState.widgets.x = 5
          ]

        })
      }
    }
    else {
      var endX = currentState.widgets.reduce((endX, w) => endX + w.w, 0)
      if (endX === 12) endX = 0

      this.setState({
        widgets: currentState.widgets.concat({
          ...currentState.availableWidgets[index],
          i: uuid(),
          x: endX,
          y: Infinity,
        })
      })
    }

    console.log(currentState.widgets);
  }

and the state is:

class DashboardContainer extends React.Component {
  state = {
    widgets: [],
    availableWidgets: [
      {
        type: 'compliance-stats',
        config: {

        },
        w: 1,
        h: 1,
        pos: 'start',
      },
      {
        type: 'compliance-stats',
        config: {

        },
        w: 3,
        h: 2,
      }
    ]
  }
  ...

I am trying to update the "x" property of each object inside "widgets" by doing so:

  for(var i = 0; i < currentState.widgets.length; i++){
    this.setState({
      widgets: [
        ...currentState.widgets,
        currentState.widgets.x = 5
      ]

    })
  }

I am aware of setting the state inside a loop is not good at all. However I am currently getting an error.

I am importing widgets in:

const Dashboard = ({ widgets, onLayoutChange, renderWidget }) => {
  const layouts = {
    lg: widgets,
  }

  return (
    <div>
      <ResponsiveReactGridLayout 
        layouts={layouts} 
        onLayoutChange={onLayoutChange} 
        cols={{ lg: 12 }} 
        breakpoints={{lg: 1200}}>
          {
            widgets.map(
              (widget) => 
              <div key={widget.i}>
                {renderWidget(widget)}
              </div>
            )
          }
      </ResponsiveReactGridLayout>
    </div>
  )
}

Possible Duplicate of stackoverflow.com/questions/47937369/… — Shubham Khatri
– Shubham Khatri, Commented Jan 18, 2018 at 17:51

Davin Tryon · Accepted Answer · 2018-01-18 18:44:28Z

3

Probably better to change the widgets and then setState only once:

const changedWidgets = currentState.widgets.map(w => ({ ...w, x: 5 }));
this.setState({ widgets: changedWidgets });

edited Jan 18, 2018 at 18:44

answered Jan 18, 2018 at 16:14

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

3 Comments

Aessandro Over a year ago

This is a great solution but it's complaining about the spread operator

Aessandro Over a year ago

I had to add a return "w => { return {...w, x: w.x + currentState.availableWidgets[index].w } }"

Davin Tryon Over a year ago

Fixed the return of the object literal

MEnf · Accepted Answer · 2018-01-18 16:16:46Z

0

The spread operator inside an array will concatenate a new value onto the array, so by seting widgets state to [ ...currentState.widgets, currentState.widgets.x = 5 ] what you're actually trying to do is currentState.widgets.concate(currentState.widgets.x = 5) which is throwing your error.

If you would like to modify the value inside an array you should map out the array and then modify the objects inside the array like so.

const widgets = currentState.widgets.map(widget => { ...widget, x: 5})
this.setState({ widgets })

answered Jan 18, 2018 at 16:16

MEnf

1,5321 gold badge12 silver badges20 bronze badges

1 Comment

MEnf Over a year ago

Spread operator: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

React update state array object single property

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related