React how to update state item 1 in state using setState

Question

I m creating an app where the user can design his own form  E g  specify name of the field and details of which other columns that should be included     The component is available as a JSFiddle here     My initial state looks like this     var DynamicForm   React createClass      getInitialState  function         var items           items 1      name   field 1   populate at   web start                    same as   customer name                    autocomplete from   customer name   title            items 2      name   field 2   populate at   web end                    same as   user name                         autocomplete from   user name   title                return   items                render  function           var  this   this        return            lt div gt              Object keys this state items  map function  key                var item    this state items key               return                  lt div gt                   lt PopulateAtCheckboxes this  this                    checked  item populate at  id  key                       populate at  data populate at    gt                lt  div gt                              this             lt button onClick  this newFieldEntry  gt Create a new field lt  button gt            lt button onClick  this saveAndContinue  gt Save and Continue lt  button gt          lt  div gt                    I want to update the state when the user changes any of the values  but I m having a hard time to target the correct object     var PopulateAtCheckboxes   React createClass      handleChange  function  e          item   this state items 1         item name    newName         items 1    item        this setState  items  items             render  function          var populateAtCheckbox   this props populate at map function value           return             lt label for  value  gt              lt input type  radio  name   populate at  this props id  value  value               onChange  this handleChange  checked  this props checked    value               ref  populate-at   gt              value            lt  label gt                    this        return           lt div className  populate-at-checkboxes  gt            populateAtCheckbox          lt  div gt                         How should I craft this setState to get it to update items 1  name

User · Answer

Found this surprisingly hard and none of the ES6 spread magic seemed to work as expected. Was using a structure like this to get rendered element properties for layout purposes.

found using the update method from immutability-helper to be the most straight forward one in this simplified example:

constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

as adapted from https://github.com/kolodny/immutability-helper#computed-property-names

of the to be updated array member is a more nested complex object use the appropriate deep copy method based on complexity.

There are surely better ways to handle layout parameters, but this is about how to handle arrays. The relevant values for each child element could also be computed outside of them, but I found it more convenient to pass containerState down, so they childs can fetch properties at will and Update the parent state array at their given index.

import React from 'react'
import update from 'immutability-helper'
import { ContainerElement } from './container.component.style.js'
import ChildComponent from './child-component'
export default class ContainerComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

  updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

  // ...

  render() {
    let index = 0
    return (
      <ContainerElement>
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      </ContainerElement>
    )
  }
}

User · Answer

How about creating another component for object that needs to go into the array  and pass the following as props    component index - index will be used to create update in array  set function - This function put data into the array based on the component index     lt SubObjectForm setData  this setSubObjectData                                                             objectIndex  index   gt    Here  index  can be passed in based on position where this SubObjectForm is used   and setSubObjectData can be something like this    setSubObjectData  function index  data         var arrayFromParentObject   lt retrieve from props or state gt         var objectInArray  arrayFromParentObject array index         arrayFromParentObject array index    Object assign objectInArray  data        In SubObjectForm  this props setData can be called on data change as given below    lt input type  text  name  name  onChange   e    gt  this props setData this props objectIndex  name  e target value     gt

User · Answer

Following piece of code went easy on my dull brain  Removing the object and replacing with the updated one      var udpateditem   this state items find function item                        return item name     field 1          udpateditem name   New updated name                             this setState prevState   gt                                            items prevState dl name template filter function item                                         return item name      field 1    concat udpateditem

User · Answer

Try with code   this state items 1     new value   var cloneObj   Object assign     this state items    this setState  items  cloneObj

User · Answer

You could use the update immutability helper for this   this setState     items  update this state items   1   name    set   updated field name           Or if you don t care about being able to detect changes to this item in a shouldComponentUpdate   lifecycle method using      you could edit the state directly and force the component to re-render - this is effectively the same as  limelights  answer  as it s pulling an object out of state and editing it   this state items 1  name    updated field name  this forceUpdate       Post-edit addition   Check out the Simple Component Communication lesson from react-training for an example of how to pass a callback function from a state-holding parent to a child component which needs to trigger a state change

User · Answer

Sometimes in React  mutating the cloned array can affect the original one  this method will never cause mutation      const myNewArray   Object assign     myArray              index   myNewItem             setState   myArray  myNewArray      Or if you just want to update a property of an item      const myNewArray   Object assign     myArray              index                    myArray index               prop  myNewValue                       setState   myArray  myNewArray

User · Answer

Mutation free      given a state state    items    name   Fred   value  1    name   Wilma   value  2        This will work without mutation as it clones the modified item in the map  this state items     map item   gt  item name      Fred        item      value  3     item   this setState newItems

User · Answer

It s really simple   First pull the entire items object from state  updated the part of the items object as desired  and put the entire items object back in state via setState   handleChange  function  e      items   Object assign this state items      Pull the entire items object out  Using object assign is a good idea for objects    items 1  name    newName      update the items object as needed   this setState   items        Put back in state

User · Answer

Don t mutate the state in place  It can cause unexpected results  I have learned my lesson  Always work with a copy clone  Object assign   is a good one   item   Object assign     this state items 1    name   newName     items 1    item  this setState  items  items      https   developer mozilla org en docs Web JavaScript Reference Global Objects Object assign

User · Answer

this setState         items  this state items map  item index    gt            if  index     1              item name    newName                     return item

User · Answer

Wrong way    handleChange    e    gt        const   items     this state      items 1  name   e target value          update state     this setState           items               As pointed out by a lot of better developers in the comments  mutating the state is wrong   Took me a while to figure this out  Above works but it takes away the power of React  For example componentDidUpdate will not see this as an update because it s modified directly   So the right way would be   handleChange    e    gt        this setState prevState   gt             items                   prevState items               prevState items 1  name   e target value

User · Answer

I would move the function handle change and add an index parameter  handleChange  function  index        var items   this state items      items index  name    newName       this setState  items  items         to the Dynamic form component and pass it to the PopulateAtCheckboxes component as a prop  As you loop over your items you can include an additional counter  called index in the code below  to be passed along to the handle change as shown below    Object keys this state items  map function  key  index    var item    this state items key   var boundHandleChange    this handleChange bind  this  index     return        lt div gt           lt PopulateAtCheckboxes this  this              checked  item populate at  id  key               handleChange  boundHandleChange              populate at  data populate at    gt       lt  div gt        this     Finally you can call your change listener as shown below here   lt input type  radio  name   populate at  this props id  value  value  onChange  this props handleChange  checked  this props checked    value  ref  populate-at   gt

User · Answer

To modify deeply nested objects variables in React s state  typically three methods are used  vanilla JavaScript s Object assign  immutability-helper and cloneDeep from Lodash  There are also plenty of other less popular third-party libs to achieve this  but in this answer  I ll cover just these three options  Also  some additional vanilla JavaScript methods exist  like array spreading   see  mpen s answer for example   but they are not very intuitive  easy to use and capable to handle all state manipulation situations  As was pointed innumerable times in top voted comments to the answers  whose authors propose a direct mutation of state  just don t do that  This is a ubiquitous React anti-pattern  which will inevitably lead to unwanted consequences  Learn the right way  Let s compare three widely used methods  Given this state object structure  state         outer            inner   initial value           You can use the following methods to update the inner-most inner field s value without affecting the rest of the state  1  Vanilla JavaScript s Object assign  x000D   x000D  const App        gt      const  outer  setOuter    React useState   inner   initial value        React useEffect      gt        console log  Before the shallow copying    outer inner     initial value     const newOuter   Object assign     outer    inner   updated value         console log  After the shallow copy is taken  the value in the state is still    outer inner     initial value     setOuter newOuter              console log  In render    outer inner     return        lt section gt Inner property   lt i gt  outer inner  lt  i gt  lt  section gt         ReactDOM render     lt App   gt     document getElementById  react     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 10 2 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 10 2 umd react-dom production min js  gt  lt  script gt    lt main id  react  gt  lt  main gt  x000D   x000D   x000D   Keep in mind  that Object assign will not perform a deep cloning  since it only copies property values  and that s why what it does is called a shallow copying  see comments   For this to work  we should only manipulate the properties of primitive types  outer inner   that is strings  numbers  booleans  In this example  we re creating a new constant  const newOuter      using Object assign  which creates an empty object       copies outer object    inner   initial value     into it and then copies a different object   inner   updated value    over it  This way  in the end the newly created newOuter constant will hold a value of   inner   updated value    since the inner property got overridden  This newOuter is a brand new object  which is not linked to the object in state  so it can be mutated as needed and the state will stay the same and not changed until the command to update it is ran  The last part is to use setOuter   setter to replace the original outer in the state with a newly created newOuter object  only the value will change  the property name outer will not   Now imagine we have a more deep state like state     outer    inner    innerMost   initial value         We could try to create the newOuter object and populate it with the outer contents from the state  but Object assign will not be able to copy innerMost s value to this newly created newOuter object since innerMost is nested too deeply  You could still copy inner  like in the example above  but since it s now an object and not a primitive  the reference from newOuter inner will be copied to the outer inner instead  which means that we will end up with local newOuter object directly tied to the object in the state  That means that in this case mutations of the locally created newOuter inner will directly affect the outer inner object  in state   since they are in fact became the same thing  in computer s memory   Object assign therefore will only work if you have a relatively simple one level deep state structure with innermost members holding values of the primitive type  If you have deeper objects  2nd level or more   which you should update  don t use Object assign  You risk mutating state directly  2  Lodash s cloneDeep  x000D   x000D  const App        gt      const  outer  setOuter    React useState   inner   initial value        React useEffect      gt        console log  Before the deep cloning    outer inner     initial value     const newOuter     cloneDeep outer     cloneDeep   is coming from the Lodash lib     newOuter inner    updated value      console log  After the deeply cloned object is modified  the value in the state is still    outer inner     initial value     setOuter newOuter              console log  In render    outer inner     return        lt section gt Inner property   lt i gt  outer inner  lt  i gt  lt  section gt         ReactDOM render     lt App   gt     document getElementById  react     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 10 2 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 10 2 umd react-dom production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 15 lodash min js  gt  lt  script gt    lt main id  react  gt  lt  main gt  x000D   x000D   x000D   Lodash s cloneDeep is way more simple to use  It performs a deep cloning  so it is a robust option  if you have a fairly complex state with multi-level objects or arrays inside  Just cloneDeep   the top-level state property  mutate the cloned part in whatever way you please  and setOuter   it back to the state  3  immutability-helper  x000D   x000D  const App        gt      const  outer  setOuter    React useState   inner   initial value          React useEffect      gt        const update   immutabilityHelper     console log  Before the deep cloning and updating    outer inner     initial value     const newOuter   update outer    inner     set   updated value           console log  After the cloning and updating  the value in the state is still    outer inner     initial value     setOuter newOuter              console log  In render    outer inner     return        lt section gt Inner property   lt i gt  outer inner  lt  i gt  lt  section gt         ReactDOM render     lt App   gt     document getElementById  react     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 10 2 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 10 2 umd react-dom production min js  gt  lt  script gt   lt script src  https   wzrd in standalone immutability-helper 3 0 0  gt  lt  script gt    lt main id  react  gt  lt  main gt  x000D   x000D   x000D   immutability-helper takes it to a whole new level  and the cool thing about it is that it can not only  set values to state items  but also  push   splice   merge  etc   them  Here is a list of commands available  Side notes Again  keep in mind  that setOuter only modifies the first-level properties of the state object  outer in these examples   not the deeply nested  outer inner   If it behaved in a different way  this question wouldn t exist  Which one is right for your project  If you don t want or can t use external dependencies  and have a simple state structure  stick to Object assign  If you manipulate a huge and or complex state  Lodash s cloneDeep is a wise choice  If you need advanced capabilities  i e  if your state structure is complex and you need to perform all kinds of operations on it  try immutability-helper  it s a very advanced tool which can be used for state manipulation     or  do you really need to do this at all  If you hold a complex data in React s state  maybe this is a good time to think about other ways of handling it  Setting a complex state objects right in React components is not a straightforward operation  and I strongly suggest to think about different approaches  Most likely you better be off keeping your complex data in a Redux store  setting it there using reducers and or sagas and access it using selectors

User · Answer

As none of the above options was ideal to me I ended up using map   this setState  items  this state items map  item idx   gt  idx   1  item      item name  new name

User · Answer

Try this it will definetly work other case i tried but didn t work  import   from  lodash    this state var name      assign this state var name       obj prop   changed value

User · Answer

Use the event on handleChange to figure out the element that has changed and then update it  For that you might need to change some property to identify it and update it    See fiddle https   jsfiddle net 69z2wepo 6164

User · Answer

Use array map with arrow function  in one line  this setState       items  this state items map  item  index    gt        index     1        item  name   newName      item

User · Answer

JonnyBuchanan s answer works perfectly  but for only array state variable  In case the state variable is just a single dictionary  follow this   inputChange   input   gt  e   gt        this setState           item  update this state item    input     set  e target value               You can replace  input  by the field name of your dictionary and e target value by its value  This code performs the update job on input change event of my form

User · Answer

or if you have a dynamically generated list and you don t know the index but just have the key or id   let ItemsCopy      let x   this state Items map  entry    gt        if entry id     theIDYoureLookingFor                 entry PropertyToChange    NewProperty             ItemsCopy push entry       this setState  Items ItemsCopy

User · Answer

Since there s a lot of misinformation in this thread  here s how you can do it without helper libs   handleChange  function  e           1  Make a shallow copy of the items     let items       this state items          2  Make a shallow copy of the item you want to mutate     let item       items 1           3  Replace the property you re intested in     item name    newName          4  Put it back into our array  N B  we  are  mutating the array here  but that s why we made a copy first     items 1    item         5  Set the state to our new copy     this setState  items         You can combine steps 2 and 3 if you want   let item            items 1       name   newName      Or you can do the whole thing in one line   this setState   items     gt         items               items slice 0 1                            items 1               name   newName                         items slice 2               Note  I made items an array  OP used an object  However  the concepts are the same     You can see what s going on in your terminal console     node  gt  items     name  foo    name  bar    name  baz        name   foo       name   bar       name   baz       gt  clone       items      name   foo       name   bar       name   baz       gt  item1       clone 1     name   bar     gt  item1 name    bacon   bacon   gt  clone 1    item1   name   bacon     gt  clone     name   foo       name   bacon       name   baz       gt  items     name   foo       name   bar       name   baz         good  we didn t mutate  items   gt  items     clone false    these are different objects  gt  items 0      clone 0  true    we don t need to clone items 0 and 2 because we re not mutating them  efficiency gains    gt  items 1      clone 1  false    this guy we copied

User · Answer

First get the item you want  change what you want on that object and set it back on the state  The way you re using state by only passing an object in getInitialState would be way easier if you d use a keyed object   handleChange  function  e       item   this state items 1      item name    newName      items 1    item      this setState  items  items

User · Answer

I had the same problem  Here s a simple solution that works     const newItems       this state items   newItems item    value  this setState   items newItems

User · Answer

handleChanges    value  key    gt            clone the current State object     let cloneObject     extend     this state currentAttribute          key as user name and value   ABC  then current attributes have current properties as we changes     currentAttribute key    value         then set the state  currentAttribute  is key and  cloneObject  is changed object        this setState  currentAttribute  cloneObject      and Change from Text box add onChange event   onChange         event    gt                                                          this handleChanges event target value   title

User · Answer

If you need to change only part of the Array  You ve a react component with state set to   state    items    name   red-one   value  100    name   green-one   value  999      It s best to update the red-one in the Array as follows   const itemIndex   this state items findIndex i  gt  i name      red-one    const newItems        this state items slice 0  itemIndex       name   red-one   value  666      this state items slice itemIndex     this setState newItems

User · Answer

According to the React documentation on setState  using Object assign as suggested by other answers here is not ideal  Due to the nature of setState s asynchronous behavior  subsequent calls using this technique may override previous calls causing undesirable outcomes   Instead  the React docs recommend to use the updater form of setState which operates on the previous state  Keep in mind that when updating an array or object you must return a new array or object as React requires us to preserve state immutability  Using ES6 syntax s spread operator to shallow copy an array  creating or updating a property of an object at a given index of the array would look like this   this setState prevState   gt        const newItems       prevState items       newItems index  name   newName      return  items  newItems

[javascript] React: how to update state.item[1] in state using setState?

Examples related to javascript

Examples related to reactjs

Examples related to state

Examples related to react-state