CODEWITHSUNDEEP
javascriptreactjs
user11284257
user11284257

Reputation:

what is the best way to select option when option is an object?

What is the best way to select option when option is an object?

During changing selected value I need to get selected option object

example https://codesandbox.io/s/st-of-select-object-ssib9 

function App() {
  const [value, setValue] = useState(options[0]);

  return (
    <select
      value={value}
      onChange={event => {
        setValue(event.target.value);
      }}
    >
      {options.map(option => {
        return <option value={option}>{option.label}</option>;
      })}
    </select>
  );
}

Upvotes: 0

Views: 116

Answers (5)

Fraction
Fraction

Reputation: 12954

I think you want the state to be an object and not the select's value, if so then try the following:

const [option, setOption] = useState(options[0]);

function handleChange(event) {
    const { value } = event.target;
    const option = options.find(o => o.value === parseInt(value, 10));
    if(option)
      setOption(option); // object
}

...

<select
  value={option.value}
  onChange={handleChange}
>
      {options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
</select>

Demo:

Edit ST-OF select object

Upvotes: 1

ankitkanojia
ankitkanojia

Reputation: 3122

I have added/updated the snippet based on your requirement, now you can pass or select whole object rather selecting single value in dropdown using HOOK concept in react.

Please see Demo

const options = [...Array(10).keys()].map(item => {
    return {
      value: item,
      label: `label ${item}`
    };
});

function App() {
   const [selectedValue, setValue] = React.useState(options[0]);
   
   {console.log("SELECTED OPTION OBJECT")}
   {console.log(selectedValue)}
   
   return (
           <select onChange={event => { setValue(JSON.parse(event.target.value)); }}>
               {options.map((option, index) => {
                   return (<option key={index} value={JSON.stringify(option)}>{option.label}</option>);
               })}
           </select>
   );
 }
 
 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"></div>

Upvotes: 0

Sifat Haque
Sifat Haque

Reputation: 6057

You can add a handleChange method there and then you'll get the selected value easily. I'm printing the selected value in console. Please check this working-demo

Here is the code, if you are interested in.

import React, { useState } from "react";
import ReactDOM from "react-dom";

const options = [...Array(10).keys()].map(item => {
  return {
    value: item,
    label: `label ${item}`
  };
});

function App() {
  const [value, setValue] = useState(options[0]);

  function handleChange(event) {
    console.log(event.target.value); // This is the selected value
    setValue(event.target.value);
  }

  return (
    <select value={value} onChange={e => handleChange(e)}>
      {options.map(option => {
        return <option value={option.label}>{option.label}</option>;
      })}
    </select>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 1

brijesh chavda
brijesh chavda

Reputation: 81

Here is your working demo which I have created:

https://codesandbox.io/s/st-of-select-object-ytohv

And you will get your selected option object in state value

Upvotes: 1

Shiva Kumar N
Shiva Kumar N

Reputation: 381

Just you need to use option.value to access the value of selected value

{options.map(option => {
    return <option value={option.value}>{option.label}</option>;
 })
}

Upvotes: 1

Related Questions