Реагировать динамически добавить х количество полей выбора для фильтрации данных

Question

У меня есть приложение, которое имеет различные фильтры для выбора полей на разных экранахЯ заполняю фильтры, используя объект json, который я передаю через компоненты.

вот ссылка на песочницу https://codesandbox.io/s/ym5qyjj5jv

Проблемы, с которыми я сталкиваюсь,

1) Я хочу подключить состояние из page.js, чтобы я мог установить значение для каждого фильтра, а затем, когда пользователь нажимает кнопку сброса, обновить это состояние.Основная проблема заключается в получении состояния в виде prop в searchbar.js

У меня есть имя состояния в json, которое я использую для генерации фильтров, поэтому я хочу написать this.props. [Variable], ноэто не работает

2) Любые другие советы будут великолепны

Answer 1

У меня получилось, см. Ссылку в вопросе.

В page.js я передал состояние (... this.state)

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

Затем в searchBar.JS, когда я зацикливаюсь на фильтре JSON, тогда я могу получить реквизит

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

Если у кого-то еще есть лучший способ сделать это, тогда дайте мне знать