How do I create a dynamic variable name in React?

user_7019635 0
Viewed 19123

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.
jsx setstate reactjs variables
3 Answers

Use [] brackets like this

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

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)
user_275610

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

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