set selected option react

Clumsy Cicada answered on December 15, 2021 Popularity 1/10 Helpfulness 1/10

answer set selected option react

related select option values in react

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

Closely Related Answers

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 5/10 Language javascript

Source: bobbyhadz.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Strange Squirrel

0 Answers Avg Quality 2/10

set selected option react

Contents

More Related Answers

set selected option react

Closely Related Answers

select option values in react

Grepper

Documentation

Social

Legal

Contact

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