React <select>'s <option> is not working at onClick

Question

I need a function at every here is it. i want to access option value.

 const region = ['Africa','America','Asia','Europe','Oceania'];
    <div className="options">
                <select>
                <option>Select a Region</option>
              {region.map((nameOfRegion) => {
               return <option onClick={() => requestRegion(nameOfRegion)}>
               {nameOfRegion}
               </option>
              })}
            </select>

this function is not logging options

const requestRegion = (region) => {
    console.log(region)
}

T J · Accepted Answer · 2021-05-08 09:53:06Z

4

Use onChange event on the <select>:

  const requestRegion = (event) => {
     console.log(event.target.value);
  };

  return (
      <div className="options">
        <select onChange={requestRegion}>
          <option>Select a Region</option>
           {
             region.map((nameOfRegion) => (<option>{nameOfRegion}</option>))
           }
        </select>
     </div>

answered May 8, 2021 at 9:53

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Viet · Accepted Answer · 2021-05-08 09:55:14Z

1

Because neither the onSelect() nor onClick() events are supported by the option tag. So you can use onChange in select tag in this case:

const onChange =(e) => {
  console.log(e.target.value);
}

<select name="select" onChange = {onChange}>
      <option>Select a Region</option>
      {region.map((nameOfRegion, i) => {
        return (
          <option key={i}>
            {nameOfRegion}
          </option>
        );
      })}
    </select>

Note: you need add key in child tag when using map

answered May 8, 2021 at 9:55

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Comments

Ori Drori · Accepted Answer · 2021-05-08 09:53:26Z

You should use an onChange handler on the select element, and get the value from the change event:

const Demo = ({ regions }) => {
  const requestRegion = e => {
    console.log(e.target.value)
  }

  return (
    <select onChange={requestRegion}>
      <option>Select a Region</option>
      {regions.map(region => (
        <option key={region}>{region}</option>
      ))}
    </select>
  )
}

const regions = ['Africa','America','Asia','Europe','Oceania']

ReactDOM.render(
  <Demo regions={regions} />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

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

Collectives™ on Stack Overflow

React <select>'s <option> is not working at onClick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related