Select

index.js

import { Component } from "react";
export default class Selector extends Component {
  constructor() {
    super();
    this.state = {
      value: "a",
      num: 0
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleChangeNum = this.handleChangeNum.bind(this);
  }
  handleChange({ target: { value } }) {
    const { num } = this.state;
    const shouldResetValue = value === "d";
    this.setState({ value, num: shouldResetValue ? 0 : num });
  }
  handleChangeNum({ target: { value } }) {
    this.setState({ num: value });
  }

  render() {
    const { value, num } = this.state;
    return (
      <div>
        <h1>Hiya value = {value} num = {num}</h1>
        <select value={value} onChange={this.handleChange}>
          <option value={"a"}>A</option>
          <option value={"b"} disabled={value === "a"}>B</option>
          <option value={"c"}>C</option>
          <option value={"d"}>Reset number selections</option>
        </select>
        <select value={num} onChange={this.handleChangeNum}>
          <option value={0} disabled>Select num</option>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
        </select>

      </div>
    );
  }
}