ReactJS get values of dynamically created Radio Buttons and pass them into state (usestate)

Question

I have a problem with my ReactJS App. I want to get values of checked radio buttons and after selecting I want to display the values of selected radio buttons.

The form is generated from a json file

[
                    {
                        variantId: 1,
                        variantName: 'Size',
                        variantOptions: [ 
                            {
                                variantOptionId: 1,
                                variantOptionName: 'S',
                                variantOptionPriceChange: 4.5
                            },
                            {
                                variantOptionId: 2,
                                variantOptionName: 'M',
                                variantOptionPriceChange: 4.5
                            },
                        ] 
                    },
                    {
                        variantId: 2,
                        variantName: 'Color',
                        variantOptions: [ 
                            {
                                variantOptionId: 3,
                                variantOptionName: 'Red',
                                variantOptionPriceChange: 4.5
                            },
                            {
                                variantOptionId: 4,
                                variantOptionName: 'Blue',
                                variantOptionPriceChange: 4.5
                            },
                        ]  
                    }                        
                ]

Demo of the problem is visible here: https://codesandbox.io/s/epic-http-bgmx3?file=/src/App.js

I want to display all selected items, not only the last one.

The problem is in this part of code, but I dont know how to rewrite it to achieve the desired behavior.

const addOption = (o) => {
    setOptions({
      optionId: o.variantOptionId,
      optionName: o.variantOptionName,
      optionPriceChange: o.variantOptionPriceChange
    });
  };

Thank you for your help, hope I described it clearly.

Answer 1

Simplest solution would be creating an object in useState with props keys for each variant and then store the selected option of that variant in related object prop

It should work like this:

 export default function App() {
  const [options, setOptions] = useState({});
  const addOption = (name, o) => {
    setOptions({ ...options, [name]: o });
  };

  return (
    <div className="App">
      {variants.map((variant, index) => {
        return (
          <Variant
            options={options}
            variant={variant}
            addOption={addOption}
            key={index}
          />
        );
      })}

      <h3>
        Selected variants are:
        <ul>
          {Object.keys(options).map((name, i) => {
            return (
              <li key={i}>
                {name}: {options[name].variantOptionName}
              </li>
            );
          })}
        </ul>
      </h3>
    </div>
  );
}