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.

score 12 · Accepted Answer · answered Nov 17 '17 at 18:49

12

Use [] brackets like this

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

answered Nov 17 '17 at 18:49

Prakash Sharma

15,542
6
30
37

How can i call it dynamically then? `this.state.["level" + (selectedItem.Level+1)]` how can it work like this? – Shady Hakim Jun 24 '20 at 18:33
@ShadyHakim You can call it dynamically like `this.state["level" + (selectedItem.Level+1)]` – Prakash Sharma Jun 25 '20 at 08:32

score 3 · Answer 2 · answered Nov 17 '17 at 18:51

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 '17 at 18:51

Robert Fischer

1,436
12
26

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. – Bethany Nov 17 '17 at 19:36

score 0 · Answer 3 · answered Jun 19 '20 at 13:25

0

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

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

answered Jun 19 '20 at 13:25

Rich

970
2
16
42

How do I create a dynamic variable name in React?

3 Answers3