How to update nested state properties in React

Question

I m trying to organize my state by using nested property like this   this state        someProperty          flag true          But updating state like this   this setState   someProperty flag  false       doesn t work  How can this be done correctly

User · Answer

I know it is an old question but still wanted to share how i achieved this. Assuming state in constructor looks like this:

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      user: {
        email: ""
      },
      organization: {
        name: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
  }

My handleChange function is like this:

  handleChange(e) {
    const names = e.target.name.split(".");
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState((state) => {
      state[names[0]][names[1]] = value;
      return {[names[0]]: state[names[0]]};
    });
  }

And make sure you name inputs accordingly:

<input
   type="text"
   name="user.email"
   onChange={this.handleChange}
   value={this.state.user.firstName}
   placeholder="Email Address"
/>

<input
   type="text"
   name="organization.name"
   onChange={this.handleChange}
   value={this.state.organization.name}
   placeholder="Organization Name"
/>

User · Answer

Something like this might suffice   const isObject    thing    gt        if thing  amp  amp           typeof thing      object   amp  amp          typeof thing     null          amp  amp    Array isArray thing                  return true            return false          Call with an array containing the path to the property you want to access   And the current component redux state     For example if we want to update  hello  within the following obj   const obj          somePrimitive false       someNestedObj           hello 1               we would do       clone the object   const cloned   clone   someNestedObj   hello   obj      Set the new value   cloned someNestedObj hello   5      const clone    arr  state    gt        let clonedObj       state      const originalObj   clonedObj      arr forEach property   gt            if   property in clonedObj                throw new Error  State missing property                      if isObject clonedObj property                 clonedObj property        originalObj property                clonedObj   clonedObj property                        return originalObj     const nestedObj         someProperty true      someNestedObj           someOtherProperty true          const clonedObj   clone   someProperty    nestedObj   console log clonedObj     nestedObj    returns false console log clonedObj someProperty     nestedObj someProperty    returns true console log clonedObj someNestedObj     nestedObj someNestedObj    returns true  console log   const clonedObj2   clone   someProperty   someNestedObj   someOtherProperty    nestedObj   console log clonedObj2     nestedObj     returns false console log clonedObj2 someNestedObj     nestedObj someNestedObj    returns false   returns true  doesn t attempt to clone because its primitive type  console log clonedObj2 someNestedObj someOtherProperty     nestedObj someNestedObj someOtherProperty

User · Answer

In order to setState for a nested object you can follow the below approach as I think setState doesn t handle nested updates   var someProperty       this state someProperty  someProperty flag   true  this setState  someProperty     The idea is to create a dummy object perform operations on it and then replace the component s state with the updated object  Now  the spread operator creates only one level nested copy of the object  If your state is highly nested like   this state        someProperty          someOtherProperty              anotherProperty                 flag  true                                                            You could setState using spread operator at each level like  this setState prevState   gt            prevState      someProperty               prevState someProperty          someOtherProperty                   prevState someProperty someOtherProperty               anotherProperty                      prevState someProperty someOtherProperty anotherProperty                 flag  false                                     However the above syntax get every ugly as the state becomes more and more nested and hence I recommend you to use immutability-helper package to update the state    See this answer on how to update state with immutability helper

User · Answer

To write it in one line  this setState   someProperty       this state someProperty  flag  false

User · Answer

We use Immer https   github com mweststrate immer to handle these kinds of issues   Just replaced this code in one of our components  this setState prevState   gt           prevState          preferences                   prevState preferences               key   newValue                  With this  import produce from  immer    this setState produce draft   gt        draft preferences key    newValue         With immer you handle your state as a  normal object   The magic happens behind the scene with proxy objects

User · Answer

I used this solution   If you have a  nested state like this      this state               formInputs               friendName                 value                   isValid false                errorMsg                               friendEmail                 value                   isValid false                errorMsg                      you can declare the handleChange function that copy current status and re-assigns it with changed values  handleChange el        let inputName   el target name      let inputValue   el target value       let statusCopy   Object assign     this state       statusCopy formInputs inputName  value   inputValue       this setState statusCopy         here the html with the event listener    lt input type  text  onChange  this handleChange    name  friendName    gt

User · Answer

Although you asked about a state of class-based React component  the same problem exists with useState hook  Even worse  useState hook does not accept partial updates  So this question became very relevant when useState hook was introduced   I have decided to post the following answer to make sure the question covers more modern scenarios where the useState hook is used   If you have got   const  state  setState    useState   someProperty    flag  true  otherNestedProp  1    otherProp  2      you can set the nested property by cloning the current and patching the required segments of the data  for example   setState current   gt       current  someProperty       current someProperty  flag  false         Or you can use Immer library to simplify the cloning and patching of the object   Or you can use Hookstate library  disclaimer  I am an author  to simply the management of complex  local and global  state data entirely and improve the performance  read  not to worry about rendering optimization    import   useStateLink   from   hookstate core   const state   useStateLink   someProperty    flag  true  otherNestedProp  1    otherProp  2      get the field to render   state nested someProperty nested flag get      or  state get   someProperty flag   set the nested field   state nested someProperty nested flag set false    Here is the Hookstate example  where the state is deeply   recursively nested in tree-like data structure

User · Answer

Although nesting isn t really how you should treat a component state  sometimes for something easy for single tier nesting   For a state like this  state      contact      phone   888-888-8888     email   test test com      address      street         occupation           A re-useable method ive used would look like this   handleChange    obj    gt  e   gt      let x   this state obj     x e target name    e target value    this setState    obj   x          then just passing in the obj name for each nesting you want to address      lt TextField  name  street   onChange  handleChange  address       gt

User · Answer

If you are using ES2015 you have access to the Object assign  You can use it as follows to update a nested object   this setState     someProperty  Object assign     this state someProperty   flag  false         You merge the updated properties with the existing and use the returned object to update the state   Edit  Added an empty object as target to the assign function to make sure the state isn t mutated directly as carkod pointed out

User · Answer

stateUpdate        gt        let obj   this state      if this props v12 data values email          obj obj v12 Customer EmailAddress   this props v12 data values email           this setState obj

User · Answer

Two other options not mentioned yet    If you have deeply nested state  consider if you can restructure the child objects to sit at the root  This makes the data easier to update   There are many handy libraries available for handling immutable state listed in the Redux docs  I recommend Immer since it allows you to write code in a mutative manner but handles the necessary cloning behind the scenes  It also freezes the resulting object so you can t accidentally mutate it later

User · Answer

This is clearly not the right or best way to do  however it is cleaner to my view  this state hugeNestedObject   hugeNestedObject   this state anotherHugeNestedObject   anotherHugeNestedObject    this setState      However  React itself should iterate thought nested objects and update state and DOM accordingly which is not there yet

User · Answer

you can  do this with object spreading code    this setState  state   gt    someProperty     state someProperty flag false     this will work for more nested property

User · Answer

There are many libraries to help with this  For example  using immutability-helper   import update from  immutability-helper    const newState   update this state      someProperty   flag    set  false       this setState newState     Using lodash fp set   import  set  from  lodash fp    const newState   set   someProperty    flag    false  this state     Using lodash fp merge   import  merge  from  lodash fp    const newState   merge this state      someProperty   flag  false

User · Answer

try this code   this setState   someProperty   flag  false

User · Answer

I found this to work for me  having a project form in my case where for example you have an id  and a name and I d rather maintain state for a nested project   return      lt div gt         lt h2 gt Project Details lt  h2 gt         lt form gt           lt Input label  ID  group type  number  value  this state project id  onChange   event    gt  this setState   project      this state project  id  event target value       gt           lt Input label  Name  group type  text  value  this state project name  onChange   event    gt  this setState   project      this state project  name  event target value       gt         lt  form gt      lt  div gt      Let me know

User · Answer

Here s a variation on the first answer given in this thread which doesn t require any extra packages  libraries or special functions   state       someProperty        flag   string         handleChange    value    gt      const newState       this state someProperty  flag  value    this setState   someProperty  newState        In order to set the state of a specific nested field  you have set the whole object  I did this by creating a variable  newState and spreading the contents of the current state into it first using the ES2015 spread operator  Then  I replaced the value of this state flag with the new value  since I set flag  value after I spread the current state into the object  the flag field in the current state is overridden   Then  I simply set the state of someProperty to my newState object

User · Answer

Use this for multiple input control and dynamic nested name  lt input type  quot text quot  name  quot title quot  placeholder  quot add title quot  onChange  this handleInputChange    gt   lt input type  quot checkbox quot  name  quot chkusein quot  onChange  this handleInputChange    gt   lt textarea name  quot body quot  id  quot  quot  cols  quot 30 quot  rows  quot 10 quot  placeholder  quot add blog content quot  onChange  this handleInputChange  gt  lt  textarea gt   the code very readable the handler handleInputChange    event    gt            const target   event target          const value   target type      checkbox    target checked   target value          const name   target name          const newState        this state someProperty   name   value           this setState   someProperty  newState

User · Answer

Create a copy of the state   let someProperty   JSON parse JSON stringify this state someProperty     make changes in this object   someProperty flag    false    now update the state  this setState  someProperty

User · Answer

I do nested updates with a reduce search   Example   The nested variables in state   state         coords            x  0          y  0          z  0           The function   handleChange   nestedAttr   gt  event   gt      const   target    value       event    const attrs   nestedAttr split          let stateVar   this state attrs 0      if attrs length gt 1      attrs reduce  a b index arr   gt         if index  arr length-1          a b    value        else if a b   null          return a b        else         return a        stateVar     else     stateVar   value     this setState   attrs 0    stateVar       Use    lt input value  this state coords x  onChange  this handleTextChange  coords x      gt

User · Answer

Disclaimer  Nested State in React is wrong design Read this excellent answer       Reasoning behind this answer  React s setState is just a built-in convenience  but you soon realise that it has its limits  Using custom properties and intelligent use of forceUpdate gives you much more  eg  class MyClass extends React Component       myState   someObject     inputValue   42      MobX  for example  ditches state completely and uses custom observable properties  Use Observables instead of state in React components       the answer to your misery - see example here There is another shorter way to update whatever nested property  this setState state   gt      state nested flag   false   state another deep prop   true   return state     On one line  this setState state   gt   state nested flag   false  state    note  This here is Comma operator  MDN  see it in action here  Sandbox   It is similar to  though this doesn t change state reference  this state nested flag   false this forceUpdate    For the subtle difference in this context between forceUpdate and setState see the linked example and sandbox  Of course this is abusing some core principles  as the state should be read-only  but since you are immediately discarding the old state and replacing it with new state  it is completely ok  Warning Even though the component containing the state will update and rerender properly  except this gotcha   the props will fail to propagate to children  see Spymaster s comment below   Only use this technique if you know what you are doing  For example  you may pass a changed flat prop that is updated and passed easily  render      some complex render with your nested state    lt ChildComponent complexNestedProp  this state nested  pleaseRerender  Math random     gt     Now even though reference for complexNestedProp did not change  shouldComponentUpdate  this props complexNestedProp     nextProps complexNestedProp  the component will rerender whenever parent component updates  which is the case after calling this setState or this forceUpdate in the parent  Effects of mutating the state sandbox Using nested state and mutating the state directly is dangerous because different objects might hold  intentionally or not  different  older  references to the state and might not necessarily know when to update  for example when using PureComponent or if shouldComponentUpdate is implemented to return false  OR are intended to display old data like in the example below   Imagine a timeline that is supposed to render historic data  mutating the data under the hand will result in unexpected behaviour as it will also change previous items     Anyway here you can see that Nested PureChildClass is not rerendered due to props failing to propagate

User · Answer

const newState   Object assign     this state   newState property nestedProperty    new value   this setState newState

User · Answer

i saw following in a book   this setState state   gt  state someProperty falg   false     but i m not sure if it s right

User · Answer

To make things generic  I worked on  ShubhamKhatri s and  Qwerty s answers   state object  this state       name        grandParent        parent1          child                parent2          child                    input controls   lt input   value  this state name    onChange  this updateState    type  text    name  name    gt   lt input   value  this state grandParent parent1 child    onChange  this updateState    type  text    name  grandParent parent1 child    gt   lt input   value  this state grandParent parent2 child    onChange  this updateState    type  text    name  grandParent parent2 child    gt    updateState method  setState as  ShubhamKhatri s answer  updateState event      const path   event target name split         const depth   path length    const oldstate   this state    const newstate        oldstate      let newStateLevel   newstate    let oldStateLevel   oldstate     for  let i   0  i  lt  depth  i    1        if  i     depth - 1          newStateLevel path i     event target value        else         newStateLevel path i          oldStateLevel path i            oldStateLevel   oldStateLevel path i          newStateLevel   newStateLevel path i                this setState newstate       setState as  Qwerty s answer  updateState event      const path   event target name split         const depth   path length    const state        this state      let ref   state    for  let i   0  i  lt  depth  i    1        if  i     depth - 1          ref path i     event target value        else         ref   ref path i                this setState state       Note  These above methods won t work for arrays

User · Answer

This is my initialState      const initialStateInput             cabeceraFamilia                familia                  direccion                  telefonos                  email                        motivoConsulta              fechaHora              corresponsables              The hook or you can replace it with the state  class component   const  infoAgendamiento  setInfoAgendamiento    useState initialStateInput     The method for handleChange  const actualizarState   e   gt        const nameObjects   e target name split           const newState   setStateNested infoAgendamiento  nameObjects  e target value       setInfoAgendamiento     newState         Method for set state with nested states  const setStateNested    state  nameObjects  value    gt        let i   0      let operativeState   state      if nameObjects length  gt  1           for  i   0  i  lt  nameObjects length - 1  i                  operativeState   operativeState nameObjects i                        operativeState nameObjects i     value      return state      Finally this is the input that I use   lt input type  text  className  form-control  name  cabeceraFamilia direccion  placeholder  Direcci  n  defaultValue  infoAgendamiento cabeceraFamilia direccion  onChange  actualizarState    gt

User · Answer

I take very seriously the concerns already voiced around creating a complete copy of your component state  With that said  I would strongly suggest Immer   import produce from  immer     lt Input   value  this state form username    onChange  e   gt  produce this state  s   gt    s form username   e target value        gt    This should work for React PureComponent  i e  shallow state comparisons by React  as Immer cleverly uses a proxy object to efficiently copy an arbitrarily deep state tree  Immer is also more typesafe compared to libraries like Immutability Helper  and is ideal for Javascript and Typescript users alike     Typescript utility function  function setStateDeep lt S gt  comp  React Component lt any  S  any gt   fn   s   Draft lt Readonly lt S gt  gt     gt  any      comp setState produce comp state  s   gt    fn s          onChange  e   gt  setStateDeep this  s   gt  s form username   e target value

User · Answer

If you are using formik in your project it has some easy way to handle this stuff  Here is the most easiest way to do with formik   First set your initial values inside the formik initivalues attribute or in the react  state  Here  the initial values is define in react state     state           data            fy                active   N                          define above initialValues for formik field inside formik initiValues attribute   lt Formik  initialValues  this state data   onSubmit   values  actions   gt      your actions goes here    gt      isSubmitting      gt       lt Form gt       lt Field type  checkbox  name  fy active  onChange   e    gt          const value   e target checked        if value  setFieldValue  fy active    Y         else setFieldValue  fy active    N           gt     lt  Form gt      lt  Formik gt    Make a console to the check the state updated into string instead of booleanthe formik setFieldValue function to set the state or go with react debugger tool to see the changes iniside formik state values

User · Answer

Sometimes direct answers are not the best ones     Short version   this code  this state         someProperty            flag  true           should be simplified as something like  this state         somePropertyFlag  true     Long version   Currently you shouldn t want to work with nested state in React  Because React is not oriented to work with nested states and all solutions proposed here look as hacks  They don t use the framework but fight with it  They suggest to write not so clear code for doubtful purpose of grouping some properties  So they are very interesting as an answer to the challenge but practically useless   Lets imagine the following state         parent            child1   value 1           child2   value 2                       child100   value 100            What will happen if you change just a value of child1  React will not re-render the view because it uses shallow comparison and it will find that parent property didn t change  BTW mutating the state object directly is considered to be a bad practice in general   So you need to re-create the whole parent object  But in this case we will meet another problem  React will think that all children have changed their values and will re-render all of them  Of course it is not good for performance   It is still possible to solve that problem by writing some complicated logic in shouldComponentUpdate   but I would prefer to stop here and use simple solution from the short version

[javascript] How to update nested state properties in React

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6

Examples related to setstate