CODEWITHSUNDEEP
javascriptreactjsselectdrop-down-menu
Dark Knight
Dark Knight

Reputation: 1083

Hide value from one dropdown if gets selected previously in reactjs

I have list of items on the left side and the dropdown the right side. I need to set one to one value with list items and to the dropdown value. So the thing is whenever I select one dropdown value for the one list item it should remove from the dropdown list. 

export default class MyComponent extends PureComponent {
  setFields = (e, i) => {
    const customers = [...this.state.customers];
    const otherCustomers = this.state.otherCustomers.filter(
      (qb) => qb._id === e.target.value
    );
    customers[i].customerId = e.target.value;
    const otherCustomers = this.state.otherCustomers.filter(
      (qb) => qb._id !== e.target.value
    );
    this.setState({ customers, otherCustomers });
  };
  render() {
    return (
      <div>
        {this.state.customers.map((d, i) => {
          return (
            <div key={i}>
              <ul>
                <li>
                  <p>{d.cName}</p>
                </li>
                <li>
                  <div>
                    <select
                      value={d._id}
                      onChange={(e) => this.setFields(e, i)}
                    >
                      <option value="">Select</option>
                      {otherCustomers.map((d1) => {
                        return (
                          <option value={d1._id} key={d1._id}>
                            {d1.name}
                          </option>
                        );
                      })}
                    </select>
                    <label>Customers Field</label>
                  </div>
                </li>
              </ul>
            </div>
          );
        })}
        ;
      </div>
    );
  }
}

Now issue is when I remove that selected customer from the list it removed it from the selected one as well.

So how can I remove it inside the render itself?

Upvotes: 0

Views: 51

Answers (1)

Rupali Naik
Rupali Naik

Reputation: 11

Create a separate two copy of that list and bind that list to drop down.

After selecting one value from left side drop down, filter out the other right side drop down list and bind this updated copy to right side.

Upvotes: 1

Related Questions