CODEWITHSUNDEEP
javascriptarraysreactjsobject
Raj
Raj

Reputation: 1

How to update Array of objects in React js using state

I want to update value of one object only but updating value of one Object, Updates the value for all objects.

let default = {
    name: '',
    age: ''
}
this.state = {
    values: Array(2).fill(default)
}

updateName (event) {
    let index = event.target.id,
    values = this.state.values;

    values[index].name = event.target.value;

    this.setState ({
        values: values
    });
}

Upvotes: 0

Views: 4264

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075925

There are four significant problems in that code.

  1. You're using the same object for all entries in your array. If you want to have different objects, you have to create multiple copies of the default.

  2. You're calling setState incorrectly. Any time you're setting state based on existing state (and you're setting values based, indirectly, on this.state.values), you must use the function callback version of setState. More: State Updates May Be Asynchronous

  3. You can't directly modify the object held in this.state.values; instead, you must make a copy of the object and modify that. More: Do Not Modify State Directly

  4. default is a keyword, you can't use it as an identifier. Let's use defaultValue instead.

Here's one way you can address all four (see comments):

// #4 - `default` is a keyword
let defaultValue = {
    name: '',
    age: ''
};
this.state = {
    // #1 - copy default, don't use it directly
    values: [
        Object.assign({}, defaultValue),
        Object.assign({}, defaultValue),
    ] // <=== Side note - no ; here!
};

// ....

updateName(event) {
    // Grab the name for later use
    const name = event.target.value;
    // Grab the index -- I __don't__ recommend using indexed updates like this;
    // instead, use an object property you can search for in the array in case
    // the order changes (but I haven't done that in this code).
    const index = event.target.id;
    // #2 - state updates working from current state MUST use
    // the function callback version of setState
    this.setState(prevState => {
        // #3 - don't modify state directly - copy the array...
        const values = prevState.values.slice();

        // ...and the object, doing the update; again, I wouldn't use an index from
        // the `id` property here, I'd find it in the `values` array wherever it
        // is _now_ instead (it may have moved).
        values[index] = {...values[index], name};

        return {values};
    });
}

Note that this line in the above:

values[index] = {...values[index], name};

...uses property spread syntax added in ES2018 (and shorthand property syntax, just name instead of name: name).

Upvotes: 1

Ayser
Ayser

Reputation: 1075

There is an easy and safe way to achieve that through the following:

this.setState({
  values: [ newObject, ...this.state.values],
});

this will create an instance of the state and change the value of an existing object with new object.

Upvotes: 0

Sagiv b.g
Sagiv b.g

Reputation: 31024

I would use the Array.prototype.map function with combination of the object spread syntax (stage 4):

Note that i changed the name of the default object to obj.
default is a reserved key word in javascript

let obj = {
    name: '',
    age: ''
}
this.state = {
    values: Array(2).fill(obj)
}

updateName(event){
    const {id, value} = event.target;  
    this.setState(prev => {
    const {values} = prev;

    const nextState = values.map((o,idx) => {
        if(idx !== id)
        return o; // not our object, return as is

      return{
          ...o,
          name: value;
        }
    });

      return{
        values: nextState
      }
    });
}

Upvotes: 0

Related Questions