How to mutate state using variable in Reactjs

Question

I am new to Reactjs and got stuck while experimenting in my code.I am using math.random to find values between 0-9 and concatenating with valvar to get multiple variables.I want to find the state of corresponding variable.

Here is my code.

 getInitialState: function(){
   return{valvar2:"",valvar3:"",valvar4:"",valvar5:"",valvar6:"",valvar7:"",valvar8:"",valvar9:""}
  },
 handleClick: function(){
  var createVar="";
  createVar ="valvar"+Math.floor((Math.random() * 9) + 1);
  if(this.state.createVar==""){
     this.setState({createVar:"HELLO"})
  }

But this code is not working, I am not sure why.This is just an example not my original code.

Community · Accepted Answer · 2017-05-23 10:29:28Z

1

If you are using babel and don't want to mutate your state directly (about mutating state, see my previous answer here), the easiest way is to use the computed property names - wrap the property name in brackets like [variable]:

const n = Math.floor((Math.random() * 3) + 1)
this.setState({
  ['valvar' + n]: 'hello'
})

You can see the example here: http://codepen.io/CodinCat/pen/YNjJBb?editors=0011

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 7, 2017 at 10:32

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kai Hao · Accepted Answer · 2017-02-07 10:36:26Z

1

Directly changing state is bad.

What you can do in this case is create a object and call setState with it.

var modifyState = {};
modifyState[createVar] = "HELLO";

this.setState(modifyState);

Or even better and cleaner with ES6 enhanced object literal

this.setState({
  [createVar]: 'HELLO'
});

answered Feb 7, 2017 at 10:36

Kai Hao

6895 silver badges12 bronze badges

Comments

Bartek Fryzowicz · Accepted Answer · 2017-02-07 10:38:51Z

0

You don't have createVar defined in your state, it's just local variable in handleClick. So this condition: this.state.createVar=="" is never met because it's undefined. You have to define createVar in your initial state.

If you want to use produced value as state object property name use this:

 handleClick: function(){
    var createVar="";
    createVar ="valvar"+Math.floor((Math.random() * 9) + 1);
    if(this.state[createVar] == ""){
        let newState = {};
        newState[createVar] = "HELLO"
        this.setState(newState)
    }
}

or if you use ES2015:

this.setState({
   [createVar]: "HELLO"
})

edited Feb 7, 2017 at 10:38

answered Feb 7, 2017 at 10:12

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

2 Comments

shubham agrawal Over a year ago

Yes that I know,for example if math.random produces "1" local variable craeteVar will be "valvar1" that is defined in initial state

Bartek Fryzowicz Over a year ago

Try this this.state[createVar] ==""

Collectives™ on Stack Overflow

How to mutate state using variable in Reactjs

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related