CODEWITHSUNDEEP
react-select
Azad Rahman
Azad Rahman

Reputation: 15

Passing "event" in react-select

According to the docs in react-select (https://github.com/JedWatson/react-select), there is a property which takes a function with two parameters (value, event). I needed to get the event. Am I doing something wrong here?

Code: https://codesandbox.io/s/62wrx9pm1k

Upvotes: 0

Views: 5090

Answers (2)

Niraj
Niraj

Reputation: 619

In the version 2.0.11 and above to update your state for each Select with the same function, you could do it like this:

class MyComponent extends Component{
 state={
  firstSelect: null,
  secondSelect: null
 }
 handleSelectChange = (selectedOption, { name }) => {
   this.setState({ [name]: selectedOption.value });
 }
 render() {
      return (
          <>
           <Select name="firstSelect" onChange={this.handleSelectChange} {...}/>
           <Select name="secondSelect" onChange={this.handleSelectChange} {...}/>
          </>
      )
 }
}

Upvotes: 0

yurii kosygin
yurii kosygin

Reputation: 154

need state eq

class App extends Component {
  state = {
    firstValue: "",
    secondValue: ""
  };
  handleChange = (value, state) => {
    this.setState({ [state]: value });
  };
  render() {
    return (
      <Select
        name="form-field-name"
        value={this.state.value}
        onChange={(value) => this.handleChange(value, "firstValue")}
        options={[
          { value: "one", label: "One" },
          { value: "two", label: "Two" }
        ]}
      />
      <Select
        name="form-field-name"
        value={this.state.value}
        onChange={(value) => this.handleChange(value, "secondValue")}
        options={[
          { value: "one", label: "One" },
          { value: "two", label: "Two" }
        ]}
      />
    );
  }
}

Upvotes: 1

Related Questions