How do I dynamically create an array of options that a user would select?

Question

Scenario: In the process of building eCommerce software using react. For the product detail page, some products will have options (size, color) and some will not. The ones that do i iterate through the options and dynamically create select elements(code below):

<div className='mt-4'>
{item.options.length > 0
? item.options.map((option) => (
 <div>
   <p>{option.name}</p>
   <select className='rounded-md border-2 w-32 h-12' onChange={handleAddOptions}>
      {option.values.map((val) => (
        <option value={val}>{val}</option>
      ))}
   </select>
 </div>
 ))
  : ''}
</div>

Here is the handleAddOptions function:

const handleAddOptions = (e) => {
   setOptions([...options, e.target.value]);
};

Now this works but not the way I want it to. It just keeps adding the options to one big array. I need the array to only be one option from each selection, no matter if the user changes multiple times.

Example:

Options are Size and Color (There could always be more though)

User picks small and blue then switches size to medium. My code would create an options array like this: [small, blue, medium] which would hold two size selections(can't have that).

EDIT: The final options array should only ever have one option from each selection. so in this case, if the user selects size many times the final array should only hold the most recent size option.

Yanick Rochon · Accepted Answer · 2022-10-04 19:42:12Z

1

Change your handler to only add new options, for example:

const handleAddOptions = (e) => {
   const option = e.target.value;

   setOptions(options => 
      options.inculdes(option) 
         ? options 
         : [...options, option]
   );
}

Update

If you have multiple selections of options, something like this :

import { useState } from "react";

const item = {
  options: [
    {
      name: "Size",
      values: ["sm", "md", "lg", "xl"]
    },
    {
      name: "Color",
      values: ["red", "blue", "green", "white", "black"]
    }
  ]
};

export default function App() {
  const [selectedOptions, setSelectedOptions] = useState(() => ({}));

  const handleAddOptions = (e) => {
    const optionName = e.target.getAttribute("data-option");
    const optionValue = e.target.value;

    setSelectedOptions((options) => ({
      ...options,
      [optionName]: optionValue
    }));
  };

  return (
    <div className="App">
      <h1>Option selection</h1>

      <div className="mt-4">
        {item.options.length > 0
          ? item.options.map((option) => (
              <div key={option.name}>
                <p>{option.name}</p>
                <select
                  className="rounded-md border-2 w-32 h-12"
                  data-option={option.name}
                  onChange={handleAddOptions}
                >
                  {option.values.map((value) => (
                    <option key={value} value={value}>
                      {value}
                    </option>
                  ))}
                </select>
              </div>
            ))
          : ""}
      </div>

      <h3>Selected Options</h3>
      {item.options.length > 0
        ? item.options.map((option) => (
            <div key={option.name}>
              {option.name} : {selectedOptions[option.name]}
            </div>
          ))
        : ""}
    </div>
  );
}

Source available here.

edited Oct 4, 2022 at 19:42

answered Oct 4, 2022 at 17:43

Yanick Rochon

53.8k30 gold badges146 silver badges230 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stinny Over a year ago

This kind of helps! But not quite what I need. The options array should only ever be the length of however many selections there are. So if it's size and color, the array should only ever have one size option and one color option.

Yanick Rochon Over a year ago

@stinny then ask the right question in order to have the right answer... :) this precision was not part of the original question.

Stinny Over a year ago

It says the array should only be one option from each selection, I will make an edit for clarity though. Thanks!

Collectives™ on Stack Overflow

How do I dynamically create an array of options that a user would select?

1 Answer 1

Update

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related