Reactjs setState with a dynamic key name

Question

EDIT  this is a duplicate  see here    I can t find any examples of using a dynamic key name when setting the state   This is what I want to do     inputChangeHandler   function  event         this setState    event target id    event target value               where event target id is used as the state key to be updated   Is this not possible in React

User · Answer

Your state with dictionary update some key without losing other value

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

Solution is below

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

here update value for key "page" with value 5

User · Answer

I was looking for a pretty and simple solution and I found this    this setState     image  i     image      Hope this helps

User · Answer

I just wanted to add  that you can also use de-structuring to refactor the code and make it look neater   inputChangeHandler  function    target    id  value          this setState    id   value

User · Answer

Thanks to  Cory s hint  i used this   inputChangeHandler   function  event        var stateObject   function           returnObj             returnObj this target id    this target value           return returnObj        bind event          this setState  stateObject             If using ES6 or the Babel transpiler to transform your JSX code  you can accomplish this with computed property names  too   inputChangeHandler   function  event        this setState    event target id   event target value            alternatively using template strings for strings        this setState     key  event target id     event target value

User · Answer

How I accomplished this     inputChangeHandler  function event      var key   event target id   var val   event target value   var obj         obj key    val   this setState obj

User · Answer

In loop with  map work like this         dataForm map    id  placeholder  type      gt            return  lt Input             value  this state type              onChangeText   text    gt  this setState    type   text                 placeholder  placeholder              key  id    gt             Note the    in type parameter  Hope this helps

User · Answer

this setState       event target id     event target value        gt          console log  State updated     JSON stringify this state event target id               Please mind the quote character

User · Answer

When you need to handle multiple controlled input elements  you can add a name attribute to each element and let the handler function choose what to do based on the value of event target name   For example    x000D   x000D  inputChangeHandler event    x000D    this setState    event target name   event target value     x000D    x000D   x000D   x000D

User · Answer

With ES6  you can just do    variable

User · Answer

when the given element is a object  handleNewObj   e   gt            const data   e Object keys e  0            this setState               anykeyofyourstate                       this state anykeyofyourstate                   Object keys e  0    data                                   hope it helps someone

User · Answer

I had a similar problem   I wanted to set the state of where the 2nd level key was stored in a variable   e g  this setState  permissions perm code   e target checked    However this isn t valid syntax   I used the following code to achieve this   this setState     permissions           this state permissions       perm code   e target checked

User · Answer

Can use a spread syntax  something like this   inputChangeHandler   function  event        this setState                this state           event target id   event target value

[javascript] Reactjs setState() with a dynamic key name?

Examples related to javascript

Examples related to reactjs

Examples related to computed-properties

Examples related to react-state