Adding independent drop down menus for each item in a resource list

[jomei1]

Hey all,

I’m developing a shopify app and having some trouble. Basically, I’m trying to add an independent drop down menu for each resource item in a resource list, but am unable to. Right now, when I change the selected option on one dropdown menu, all of them change. I believe this is due to all of them referencing the same variable, ‘selected’, which I declare/initialize at the very beginning. This should be a simple fix but I’ve tried everything that would intuitively make sense to me to no avail. If you have any idea where else I could be doing this/how to separate the selected values for each of my resource items, help would be greatly appreciated. I’ve also attached screenshots of the relevant code portions below. Thanks!

[SBD]

Hey @jomei1

Try moving the Select into a component where it can manage state independently for each product. Something like this should work:

function ResourceListExample() {
  return (
    
  );
}

function WarrantyCategory() {
  const options = ['Option 1', 'Option 2'];
  const [selected, setSelected] = useState(options[0]);

  return (