CODEWITHSUNDEEP
javascriptreactjsformsmulti-selectreact-select
Saff Ron
Saff Ron

Reputation: 13

react-select: (multiselect) How to pass both event object & selectedOptions to event handler?

I have multiple Select fields in my App component. Since it throws an error if I pass the event object(to access 'id' of each component) as a second parameter to the event handler(along with selectedOptions), I cannot have a single event handler for all the Select components. Instead, I currently need a separate event handler for each component, so that I can store the selected options of each component in different arrays in component state. If I could use event.target.id, I could do the same job with just one function.

codesandbox: https://codesandbox.io/s/peaceful-spence-1j3nv?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

import React from 'react'
import Select from 'react-select';

const options = [
  { value: 'red', label: 'red' },
  { value: 'blue', label: 'blue' },
  { value: 'green', label: 'green' }
];

class App extends React.Component {
  state = {
    selectedOptionsFIRST: [],
    selectedOptionsSECOND: [],
  }

  handleChangeFIRST = (selectedOptions) => {
    this.setState({ selectedOptionsFIRST: selectedOptions });
  }

  handleChangeSECOND = (selectedOptions) => {
    this.setState({ selectedOptionsSECOND: selectedOptions });
  }

  render() {
    return (
      <React.Fragment>
      <Select
        id={0}
        isMulti
        value={this.state.selectedOptionsFIRST}
        onChange={this.handleChangeFIRST}
        options={options}
      />
      {this.state.selectedOptionsFIRST.map(o => <p>{o.value}</p>)}
      <Select
        id={1}
        isMulti
        value={this.state.selectedOptionsSECOND}
        onChange={this.handleChangeSECOND}
        options={options}
      />
      {this.state.selectedOptionsSECOND.map(o => <p>{o.value}</p>)}
      </React.Fragment>
    );
  }
}

Upvotes: 0

Views: 638

Answers (1)

de3
de3

Reputation: 2000

What about passing the state field in the handler?

import React from "react";
import Select from "react-select";

const options = [
  { value: "red", label: "red" },
  { value: "blue", label: "blue" },
  { value: "green", label: "green" }
];

class App extends React.Component {
  state = {
    selectedOptionsFIRST: [],
    selectedOptionsSECOND: []
  };

  handleChange = (id, selectedOptions) => {
    this.setState({ [id]: selectedOptions });
  };


  render() {
    return (
      <React.Fragment>
        <Select
          isMulti
          value={this.state.selectedOptionsFIRST}
          onChange={(e) => {this.handleChange('selectedOptionsFIRST',e);}}
          options={options}
        />
        {this.state.selectedOptionsFIRST.map((o) => (
          <p>{o.value}</p>
        ))}
        <Select
          isMulti
          value={this.state.selectedOptionsSECOND}
          onChange={(e) => {this.handleChange('selectedOptionsSECOND',e);}}
          options={options}
        />
        {this.state.selectedOptionsSECOND.map((o) => (
          <p>{o.value}</p>
        ))}
      </React.Fragment>
    );
  }
}

export default App;

Upvotes: 1

Related Questions