React dynamically add x amount of select boxes for filtering data

Question

I have an app that has various select box filters across different screens. I'm populating the filters using json object which i'm passing down through components.

here is the link to the sandbox https://codesandbox.io/s/ym5qyjj5jv

The problems i'm having are

1) i want to hook up state from page.js so i can set the value for each filter and then when the user clicks reset update that state. The main problem is getting the state as prop in searchbar.js

i have the state name in the json i'm using to generate the filters so i'm wanting to write this.props.[variable] but this doesn't work

2) Any other tips would be great

Answer 1

I got it working, see the link in the question.

In page.js i passed the state (...this.state)

 <SearchBar
          onChange={this.onChange}
          onReset={this.onReset}
          filters={filters}
          {...this.state}
        />

Then in searchBar.js when i'm looping through the filter json i can then get the prop

value={this.props[filter[1].name]}

If anyone else has a better way of doing this then let me know