Vfrdtyky

I have a reactjs custom dropdown component which contains a list of mobiles.

1. Three instances of components get rendered initially.




2. I want to remove the selected mobile from other dropdowns

For example, let's say that the master mobile list contains Apple, Nokia, Samsung, and OnePlus.

If you select Nokia in first dropdown then in the second dropdown you should see the mobiles from the list but without Nokia.

• First Dropdown -- Nokia, Apple, Samsung, OnePlus (selected-->Nokia)


• Second Dropdown -- Apple, Samsung, OnePlus (selected-->Apple)


• Third Dropdown -- Samsung, OnePlus

You can either keep the options of your dropdown in state and maintain a different state for options of each dropdown

I would approach it this way

1.Have a parent container that renders 3 drop-down children component.

class Parent extends Component {

    constructor(props) {

        super(props);

        this.state = {

            child1: ['samsung', 'sony'],

            child2: ['samsung', 'sony'],

            child3: ['samsung', 'sony'],

        }

    }

    render() 

       return( 

          <div> // see below for handleSelect function

             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child1} />

             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child2} />

             <Dropdown onSelect={this.handleSelect.bind(this)} selectables={this.state.child3} />

          <div>

        )

 }     

2.In parent container, create a function that will get triggered when a child's dropdown option is selected. e.g.)

// In parent container

handleSelect(object) {

    // Do logic here. 

    // e.g. if the first child selects an option by

    if (object.selectedChild === 'FIRST') 

        const selected = object.selected;

        // remove selected from an array

        this.setState({ ... update the second dropdown selectables });

}



// In child component. Call this when option is selected

handleSelect(value) {

    const obj = { selectedChild: 'FIRST' , selected: value };

    this.props.onSelect(obj); // call parent function

}

3.When a child calls

this.props.onSelect(obj)

It will update the state in parent accordingly, which will pass down updated props to the children when it re-renders

Then child will get re-rendered with updated selectable object.

I can help you only with a state shape. Components handling should be your own work.

You can use a shared state for your dropdowns. Where you will to store an array of items and track selected item.

For example somewhere in a container:

state = {

  data: [

   {

    name: 'Nokia',

    selected: false,

   },

   {

    name: 'Apple',

    selected: false,

   },

   {

    name: 'OnePlus',

    selected: false,

   }

  ]

}

Inside your dropdown component simple filter this array with .filter() like this:

this.state.data.filter((item) => !item.selected)

Handle select logic and selected item for dropdown label should not be a problem.