handling multiple select rows in react-select

Question

I'm using the React-Select library to generate select options in react as you will see in the screenshot provided. The concept is simple, I have a button to add a new row that has a select options to input clients, the other input to insert date. Upon clicking on the plus button, it will add a new row to be filled with the exact info like i've explained. Please see the screenshot.

I have a problem filling up my state when the data changes for each row, so each object in the array represents a row, the following is my state

this.state = {
    customClients: [
     {
      date: null,
      clients: [{ value: "", label: "" }]
    }
    ]
  }

and this is a snippet of my render method

{this.state.customClients.map((client, i) => {
      let cli_id = `cli-${i}`;
      let date_id = `date-${i}`;
      return (
        <div className="row" key={i} id={i}>
          <div className="col-md-4">
            <p className="mb-1 mt-3 font-weight-bold text-muted">Clients</p>
            <Select
              name="clients"
              inputId={cli_id}
              isMulti
              value={client.clients}
              onChange={this.handleCustomClients}
              options={clients || []}
              className="basic-multi-select"
              classNamePrefix="select"
            />
          </div>

          <div className="col-md-8">
            <div className="form-group">
              <p className="mb-1 mt-3 font-weight-bold text-muted">Date</p>
              <DatePicker
                name="date"
                id={date_id}
                className="form-control"
                selected={client.date}
                onChange={this.handleCustomClients}
                minDate={new Date()}
              />
            </div>
          </div>
        </div>
      );
    })}

what problem exactly you are facing?

Arun AK
– Arun AK

2018-12-31 14:03:44 +00:00
Commented Dec 31, 2018 at 14:03 — Arun AK
– Arun AK, Commented Dec 31, 2018 at 14:03
What's in handleCustomClients?

StackedQ
– StackedQ

2018-12-31 14:05:09 +00:00
Commented Dec 31, 2018 at 14:05 — StackedQ
– StackedQ, Commented Dec 31, 2018 at 14:05

Aamin Khan · Accepted Answer · 2018-12-31 14:38:37Z

1

Since you are changing the object which recites inside array you need to pass the index of the record you want to edit. first let's update the onChange event and pass the index

<Select
        name="clients"
        inputId={cli_id}
        isMulti
        value={client.clients}
        onChange={e => this.handleCustomClients(e, i)}
        options={clients || []}
        className="basic-multi-select"
        classNamePrefix="select"
/>

And the method below

handleCustomClients(e, i) {
    this.setState(prevState => {
      return (prevState.customClients[i].clients = e);
    });
}

code sandbox https://codesandbox.io/s/rm1k8oor7o

Cheers!

answered Dec 31, 2018 at 14:38

Aamin Khan

7374 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trpt4him Over a year ago

This appears to no longer work with react-select version 5? the onChange handler only returns action and option, no event object that I can find.

Collectives™ on Stack Overflow

handling multiple select rows in react-select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related