How can I select multiple values in react js?

Question

I am trying to select multiple value from from select field, but I can only select one field and I fetch data from API and in API endpoint I can select multiple user like user=1,2,3 and I also want to select multiple user in react js. Here is my code:

This is my form:

 <select
      multiple={true}
      onChange={this.handleChange}
      value={this.state.selectedOptions}
      className="form-control btn-block"
      id="exampleFormControlSelect2 btn-block"
      style={{
        width: "200px",
        color: "rgba(19, 183, 96, 1.0)"
      }}
      name="idd"
    >
      {this.state.movies.map(c => (
        <option value={c.pk}>{c.user1}</option>
      ))}
    </select>

Here is handle change event and fetch data:

handleChange(event) {
    //this.setState({value: event.option});
    this.setState({
      value: Array.from(event.target.selectedOptions, item => item.value)
    });
  }

  // Get Data From Backend
  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.reportModel);
      const movies = await res.json();
      // console.log(report);
      this.setState({
        movies
      });
    } catch (e) {
      console.log(e);
    }
  }

Please help. I'm stuck here and I don't know how to resolve this.

Willman.Codes · Accepted Answer · 2019-10-20 17:45:49Z

in your select field props change value={this.state.selectedOptions} to value={this.state.value}

working (simplified) snippet

class SomeComponent extends React.Component{
    state={
        value:null,
        movies:[{user1:'iRobot', pk:'1'},{user1:'Matrix', pk:'2'},{user1:'Hackers' , pk:'3'}]
    }

    handleChange(event) {
        this.setState({
             value : Array.from(event.target.selectedOptions, item => item.value)
        });
    }
    
    
    render(){
    return (
        <select
            multiple
            onChange={(e)=>console.log()}
            value={this.state.value}
        >
            {this.state.movies.map(movie => (
                <option value={movie.pk}>{movie.user1}</option>
            ))}
        </select>
    )
    }

}

ReactDOM.render(
    <SomeComponent />,
    document.getElementById("react")
);

<div id='react'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Mohit Arora · Accepted Answer · 2019-10-21 08:04:30Z

0

There is a library react-select which you can use to achieve the desired functionality. Following is the link to official npm site for that package

https://www.npmjs.com/package/react-select

answered Oct 21, 2019 at 8:04

Mohit Arora

1021 silver badge7 bronze badges

Collectives™ on Stack Overflow

How can I select multiple values in react js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related