Updating state when using multiple Radio Groups

[deltasierra96]

I'm trying to create a variant selector that currently looks like the following.

This is the data I am working with.

  const productData = {
    variations: [
      {
        id: '91d049a2-f503-4fef-bd7e-ecca33a65d18',
        productId: '0a4e440b-a89f-4f75-9c96-1edad5195f9c',
        name: 'Size',
        variations: [
          {
            id: '05c1f264-8931-4687-a06d-21b6cef839d5',
            value: '19"',
            variationId: '91d049a2-f503-4fef-bd7e-ecca33a65d18',
          },
          {
            id: '34dc60b0-4b2f-438e-a0d5-26319045c58e',
            value: '20"',
            variationId: '91d049a2-f503-4fef-bd7e-ecca33a65d18',
          },
        ],
        _count: {
          variations: 2,
        },
      },
      {
        id: '3d1b4bab-c0f3-4a81-910f-5dadda537409',
        productId: '0a4e440b-a89f-4f75-9c96-1edad5195f9c',
        name: 'Color',
        variations: [
          {
            id: 'ced40c11-b5d4-43c3-bbfe-5aeb34cb75a1',
            value: 'Gloss Black',
            variationId: '3d1b4bab-c0f3-4a81-910f-5dadda537409',
          },
          {
            id: '3f96069f-e1a9-4a53-b094-98d50e36956a',
            value: 'Machined Silver',
            variationId: '3d1b4bab-c0f3-4a81-910f-5dadda537409',
          },
          {
            id: 'c316c1c4-96a5-4ccc-9248-397d3e13fcfa',
            value: 'Ice White',
            variationId: '3d1b4bab-c0f3-4a81-910f-5dadda537409',
          },
        ],
        _count: {
          variations: 3,
        },
      },
    ],
  };

  const handleOnChange = (val: string) => {
      setSelected((prev) => [...prev, val]);
  };

{productData.variations.map((variation) => {
  return (
    <RadioGroup onChange={handleOnChange} defaultValue={variation.variations[0]?.id}>
      <Label>{variation.name}</Label>
      <div className='flex w-full gap-2'>
        {variation.variations.map((variation) => (
          <ProductOption value={variation.id}>
            <div>
              <div className='block'>{variation.value}</div>
              <div className='mt-2 block text-xs text-neutral-500'>{variation.id}</div>
            </div>
          </ProductOption>
        ))}
      </div>
    </RadioGroup>
  );
})}

How would one go about creating/updating state that contains the ID's of the selected Radio Group option for each Radio Group?

Ultimately I would end up with an array of unique selected variation id's and when selecting a new radio option, it would replace/update the necessary id, for example:

['05c1f264-8931-4687-a06d-21b6cef839d5', 'ced40c11-b5d4-43c3-bbfe-5aeb34cb75a1'] <-- representing 19" Gloss Black
['05c1f264-8931-4687-a06d-21b6cef839d5', '3f96069f-e1a9-4a53-b094-98d50e36956a'] <-- representing 19" Machined Silver
['34dc60b0-4b2f-438e-a0d5-26319045c58e', 'ced40c11-b5d4-43c3-bbfe-5aeb34cb75a1'] <-- representing 20" Gloss Black
...

[reidbarber]

First, I think it's a bit confusing to call both entities "variants", so for the purpose of this, I'll call them feature (i.e. Color) and variant (i.e. Gloss Black).

There are a lot of ways to do this, but I think a good option is to store selected state in the key-value format {[featureId]: selectedVariantId}, using an object or Map.

For your selection handler, you'll need to pass in the feature id and the newly selected variant id for that feature.

Ex:

let handleOnChange = (featureId, newSelectedVariantId) => {
  setSelected((prevSelected) => new Map([...prevSelected, [featureId, newSelectedVariantId]]))
}

Then, to get the output array you want, you can use Object.values() if you're using an object, or Map.prototype.values() if using a Map.

[snowystinger]

If you need to coordinate state over objects, it can be useful to use https://react.dev/reference/react/useReducer as well