Breaking News: Grepper is joining You.com. Read the official announcement!

select option values in react

Strange Squirrel answered on December 15, 2021 Popularity 10/10 Helpfulness 6/10

answer select option values in react

related set selected option react

select option values in react

Comment

import {useState} from 'react';

const App = () => {
  const options = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const [selected, setSelected] = useState(options[0].value);

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

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: bobbyhadz.com

Tags: javascript select

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Strange Squirrel

0 Answers Avg Quality 2/10

Closely Related Answers

set selected option react

Comment

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>            
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript selected set

Link to this answer
Share Copy Link

Contributed on Dec 15 2021

Clumsy Cicada

0 Answers Avg Quality 2/10

select option values in react

Contents

More Related Answers

select option values in react

Closely Related Answers

set selected option react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.