How to correctly set the structure of the state and update it with different choices?

Question

JavaScript

I have filter components -> priceFilter, colorFilter

Each of the bottom has different content. I need to set what value is selected and display them at the bottom. One of the multiple selection components, the other single selection.

I chose the following state structure:

{
  {
    id: 'refinementColor', // id самого фильтра
    value: [] // есть single selection то тут ""
   }
}

Well, with each select, add a key - value to the state:

{
  {
    id: 'refinementColor', // id самого фильтра
    value: [] // есть single selection то тут ""
   }
}

Click on price:

{
  {
    id: 'refinementColor',
    value: []
   },
  {
    id: "price",
    value: "900$ - 200$"
  }
}

CodeSandbox - https://codesandbox.io/s/stoic-bhaskara-o4ntp?file...

Have I chosen the right structure and how do I update the values ​​correctly?

Answer 1

https://codesandbox.io/s/suspicious-glitter-jrzbv?...