How do I create a dynamic variable name in React?

Question

In React, I am trying to dynamically create my state variable name using a variable and static text. 'level2' will be created by 'level' text plus a variable indicating what level (selectedItem.Level+1).

this.state={
  level1:[""], // city
  level2:[""]  // township
  level3:[""]  // neighborhood 
  level4:[""]  // street
}

When a user clicks on a city, I populate an array of all townships within the city and so on. Through props I know what level was clicked. I would like to dynamically create what state variable to update.

'FilteredListFromClick' is a array of children based on what parent was clicked.

this.setState({level2: FilteredListFromClick}) // hard coding name works, level2 is populated with a list of townships in clicked city.

var levelName = "level" + selectedItem.Level+1; // column1, column2, etc
this.setState({levelName: FilteredListFromClick}) // does not work, state is not updated, results are an empty list 

this.setState({"level"{selectedItem.Level+1}: FilteredListFromClick}) // syntax errors - I've tried playing around with different combos of (), {}, "", and so on. Ideally I would like to set my state in one line like this.

Prakash Sharma · Accepted Answer · 2017-11-17 18:49:02Z

12

Use [] brackets like this

this.setState({["level" + (selectedItem.Level+1)]: FilteredListFromClick})

answered Nov 17, 2017 at 18:49

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

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

2 Comments

Shady Hakim Over a year ago

How can i call it dynamically then? this.state.["level" + (selectedItem.Level+1)] how can it work like this?

Prakash Sharma Over a year ago

@ShadyHakim You can call it dynamically like this.state["level" + (selectedItem.Level+1)]

Robert Fischer · Accepted Answer · 2017-11-17 18:51:39Z

3

Prakash's solution works given an advanced enough EcmaScript version.

An older-style and (IMHO) slightly more readable solution is to build the map outside and pass it in.

const newState = {}
newState["level" + selectedItem.Level+1] = FilteredListFromClick
this.setState(newState)

answered Nov 17, 2017 at 18:51

Robert Fischer

1,44312 silver badges26 bronze badges

1 Comment

Bethany Over a year ago

Thank you for the quick reply Robert! I went with Prakash's answer to use fewer lines of code. I'm using the latest EcmaScript version.

Rich · Accepted Answer · 2020-06-19 13:25:32Z

0

An small tweak update this answer to a more current approach:

this.setState({
    [`level${selectedItem.Level + 1}`]: FilteredListFromClick
})

answered Jun 19, 2020 at 13:25

Rich

1,0512 gold badges18 silver badges43 bronze badges

Collectives™ on Stack Overflow

How do I create a dynamic variable name in React?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related