I'm working on a React Native project. Right now, I'm adding new key/value inside an object.

It's working but I would like to know if there is a better way to do it or if you have any advice.

I'm still new to ReactJS/React Native and not 100% skills on Javascript. So here's my code :

My object

state = {
    result : {
        "q1":1
    }
}

My function to add key/value and modify the state of result :

_getValue = (id, value) => {

    var newObj = this.state.result;
        newObj[id] = parseInt(value);

    this.setState({
        result: newObj
    }, () => {
        console.log(this.state.result)
    })
}

Thank you !

I'm working on a React Native project. Right now, I'm adding new key/value inside an object.

It's working but I would like to know if there is a better way to do it or if you have any advice.

I'm still new to ReactJS/React Native and not 100% skills on Javascript. So here's my code :

My object

state = {
    result : {
        "q1":1
    }
}

My function to add key/value and modify the state of result :

_getValue = (id, value) => {

    var newObj = this.state.result;
        newObj[id] = parseInt(value);

    this.setState({
        result: newObj
    }, () => {
        console.log(this.state.result)
    })
}

Thank you !

• javascript
• reactjs
• object
• react-native
• addition

• 1 What you did is good. The only change I would recommend is change var to const :) and this.state.result; assign state as const { result } = this.state; instead of calling this.state everytime – Hemadri Dasari Commented Sep 27, 2018 at 13:22
• it is not - he is mutating the state.result directly before calling setState which is not synchronous. it may cause an unexpected bug that is very hard to catch. – Dimitar Christoff Commented Sep 27, 2018 at 13:24
• @Dimitar he is adding new key and value to the existing object. Isnt it? What’s wrong in that? – Hemadri Dasari Commented Sep 27, 2018 at 13:36
• 1 reactjs.org/docs/react-component.html#state - the issue is also (potentially) in that something else may be causing render meanwhile before the queued setState() change takes effect (reactjs.org/docs/react-component.html#setstate - it shows how it may not do it immediately, batch it of defer it for later). so other parts of the app may get the changed values before they should. it's acceptable to do const result = Object.assign({}, this.state.result); to avoid mutating it directly (or spread). – Dimitar Christoff Commented Sep 27, 2018 at 14:17
• 1 @Think-Twice he changes in place existing object, that changes, but replaces immutably part that didn't change. This makes no sense. And setState should be immutable update. – Ebuall Commented Sep 27, 2018 at 15:01

1 Answer 1

this should work fine.

this.setState({
  result: {
     ...this.state.result,
     [id]: value
  }
});

it uses modern/new features such as object spread (...this.state.result) and dynamic object properties ([id]: value)