Getting undefined from a dropdown in React

Question

I have read so many posts that i think I have read so many and got confused as it seems there are many ways to do what i need. This is my component

class InputForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dropdown: 'RTS', value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleDropdown = this.handleDropdown.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleDropdown(event) {
    this.setState({ dropdown: event.target.dropdown });
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} className='flex'>
        <select value={this.state.dropdown} onChange={this.handleDropdown} className='py-2 px-3 mr-2 rounded'>
          <option value='RTS'>RTS</option>
          <option value='RTB'>RTB</option>
          <option value='BH'>BH</option>
          <option value='MPC'>MPC</option>
          <option value='MPC_DSP'>MPC_DSP</option>
        </select>

        <input
          type='text'
          value={this.state.value}
          onChange={this.handleChange}
          className='py-2 px-3 mr-2 rounded'
          placeholder='Log Name...'
        />

        <Btn onClick={() => getData(this.state.dropdown, this.state.value)}>Generate</Btn>
      </form>
    );
  }
}

export default InputForm;

When changing the state of value={this.state.dropdown} i am getting undefined. Have i set everyting correctly?

Pawel Laskowski · Accepted Answer · 2021-06-29 14:25:25Z

1

In your handleDropdown function you need to retrieve the value from event.target.value instead of event.target.dropdown:

handleDropdown(event) {
  this.setState({ dropdown: event.target.value });
}

answered Jun 29, 2021 at 14:25

Pawel Laskowski

6,3661 gold badge26 silver badges38 bronze badges

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

1 Comment

mrpbennett Over a year ago

Perfect...i was close but not there! haha Thanks for fixing it...it was driving me a little mad

Collectives™ on Stack Overflow

Getting undefined from a dropdown in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related