CODEWITHSUNDEEP
javascriptreactjsforms
mrpbennett
mrpbennett

Reputation: 1956

Getting undefined from a dropdown in React

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?

Upvotes: 0

Views: 670

Answers (1)

Pawel Laskowski
Pawel Laskowski

Reputation: 6326

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 });
}

Upvotes: 1

Related Questions