How to setState in objects of arrays in the react state?

Question

How to change the values of a object in the array in the react state by using setState?

My react state:

this.state = {
    serviceFees: [
        {
        periodFrom: new Date(),
        periodTo: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
        serviceFeeType: 'percentage',
        serviceFee: '',
        refundableStatus: 'refundable'
        }
    ]
};

And some of my onChange fuctions:

handlePeriodFromDateChange = (date) => {
    this.setState({
        periodFrom: date,
        periodTo: new Date(date.getTime() + 24 * 60 * 60 * 1000)
    });
}

handleRefundableStatus = (e) => {
    this.setState({
        refundableStatus: e.target.value
    })
}

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}

McRist · Accepted Answer · 2019-07-27 17:36:54Z

1

Here you are doing it wrong. You can't directly write the properties name and value, without telling which index you want to update.

If you want to update the object property of lets say first index of the array then you have to do in like :

handlePeriodFromDateChange = (date) => {
    consr 
    this.setState({
       serviceFees: this.state.serviceFees.map((e,i)=>{
          if(i === 0) {
            return {
              ...e, 
              periodFrom: date,
              periodTo: new Date(date.getTime() + 24 * 60 * 60 * 1000)
            }
          }
          return e;
       }})
    });
}

You have to change the reference of both the array and the object inside the array which you want to update. For changing the reference of the array you an use map method, which returns a new array.

answered Jul 27, 2019 at 17:36

McRist

1,78811 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to setState in objects of arrays in the react state?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related