Dynamic Value Dropdown in React

Question

I have variabled called types that I want to display in the select dropdown. I have a difficulty displaying it. Its values are dynamic based on the types. Pls check my codesandbox here

CLICK HERE

Code

 {types.map((value, index) => (
        <Dropdown value={value} index={index} />
 ))}


const Dropdown = ({ value, index }) => {
  const select = (e) => {
    console.log(e);
  };
  return (
    <Select onChange={(e) => select(e)}>
      {/* {value.map((value, index) => (
        {value.name}
        <option value="1">{value.option[index+1]}</option>
      ))} */}
    </Select>
  );
};

Nedko Dimitrov · Accepted Answer · 2021-07-22 04:17:35Z

1

In the <Dropdown /> component the value is not an array but an object. If you want to loop over it, do the following:

    const Dropdown = ({ value, index }) => {
  const select = (e, value) => {
    console.log("event", e);
    console.log("object", value);
  };
  return (
    <Select onChange={(e) => select(e, value)}>
      {Object.keys(value)
        .filter((key) => value[key] && key.startsWith("option"))
        .map((key, index) => (
          <option value={key}>{value[key]}</option>
        ))}
    </Select>
  );
};

https://codesandbox.io/s/dynamic-select-dropdown-styled-components-forked-78qm6?file=/Dropdown.js

edited Jul 22, 2021 at 4:17

answered Jul 22, 2021 at 3:49

Nedko Dimitrov

5,2413 gold badges31 silver badges31 bronze badges

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

8 Comments

Joseph Over a year ago

Hi, it should display the value of the options like 6 Pack, red, blue etc...

Nedko Dimitrov Over a year ago

@Joseph, you just had to swap the key/value like <option value={key}>{value[key]}</option>. I updated my answer and codesandbox

Joseph Over a year ago

Thanks. any idea how not to display the null values and also console.log the whole object selected in select function.

Nedko Dimitrov Over a year ago

@Joseph, to remove null value just added additional check in the filter function value[key] && key.startsWith("option"). To display the selected object I had to pass it to the select function. Updated my answer and sandbox

Nedko Dimitrov Over a year ago

@Joseph, forgot to update the sandbox URL in the prev edit codesandbox.io/s/…

|

codebarz · Accepted Answer · 2021-07-22 03:53:05Z

Using your data structure, your Dropdown component works if you do it this way but would only pick the first option.

const Dropdown = ({ value, index }) => {
  return (
    <Select>
        <option value="1">{value[`option${index+1}`]}</option>
    </Select>
  );
};

But this is what I advise, If this is within your control, I would advise you restructure your types data structure a little bit to something like below

const types = [
    {
      id: "1",
      name: "color",
      options: [
        {value: "red", label: "red"}, 
        {value: "blue", label: "blue"}
      ],
      price: 12
    },
    {
      id: "2",
      name: "weight",
      options: [
        {value: "", label: "Placeholder"},
        {value: "20", label: "20 Kilos"}, 
        {value: "30", label: "30 Kilos"}, 
        {value: "40", label: "40 Kilos"}, 
        {value: "50", label: "50 Kilos"}
      ],
      price: 13
    }
];

Then your dropdown component can also be refactored to this

const Dropdown = ({ options, index }) => {
  return (
    <Select>
      {options.map((option) => <option value={option.value}>{option.label}</option>)}
    </Select>
  );
};

This would enable you to easily use your Dropdown component with the type array as follows

  return (
    <MainContainer>
      {types.map((value, index) => (
        <Dropdown options={value.options} index={index} />
      ))}
    </MainContainer>
  );

AliReza Beigy · Accepted Answer · 2021-07-22 03:48:54Z

0

I suggest to fix the type structure, anyway you can fix it in js side by following code

let options = Object.fromEntries(Object.entries(value).filter(entry => Object.keys(value).filter(k => k.startsWith("option")).includes(entry[0])));

sample options value:

{option1: "20 Kilo", option2: "30 Kilo", option3: "40 Kilo", option4: "50 Kilo"}

answered Jul 22, 2021 at 3:48

AliReza Beigy

6281 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

Dynamic Value Dropdown in React

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related