css - How to hide selected option in Autocomplete using reactjs

Question

I want to hide the selected option in the Dropdown, the option should not appear in the next dropdown. For an example, there are 2 dropdowns, in the first dropdown - i have selected "Hockey" then "hockey" should not be shown in the second dropdown, It should show only "Baseball and badminton".

My JSON data will be appearing in this way:

"details": [
      { "id": "12wer1", "name": "ABC", "age": 15, "game": "badminton" },
      { "id": "78hbg5", "name": "FRE", "age": 21, "game": "Hockey" }
    ]

Here is the sample Code:

let games = [{ game: "Baseball"}, { game: "Hockey"}, { game: "badminton" }];

class Field  extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      details: [{id: '', name: '', age: '', game: ''}]
    }
  }
  ...
  ...
render() {
return (
 ...
 ...
{this.state.details.map((y) => (
 <Autocomplete
     style={{ witdth: 200 }}
     options={games}
     getOptionLabel={(option) => option.game}

     onChange={(value) =>this.onGameChange(value, y.id)}
     value={games.filter(i=> i.game=== y.game)}
     renderInput={(params) =>
        <TextField {...params} label="Games" margin="normal" />
       } 
   />))}
  ...
  ...
  )
 }
}


onGameChange = (e, id)=> {
let games = this.state.details;
            let data = games.find(i => i.id === id);
            if (data) {
                data.game = value.game;
            }
            this.setState({ details: games });
}

I have no idea, how to hide the selected option, can anyone help me in this query?

Thanks! in advance.

question from:https://stackoverflow.com/questions/65839082/how-to-hide-selected-option-in-autocomplete-using-reactjs

Answer 1

A possible solution would be to

• create an array and store the values in an array when the user selects autocomplete

• while passing options, filter the values that have been passed to other autocompletes.

   const ary = [111,222,333];
  
   let obj = [{id: 111},{id: 222}];
  
   const i = 1; // this is your index in loop
   const ary2 = ary.slice()
   ary2.splice(i,1);
   console.log(obj.filter((o) => !ary.includes(o.name))); // this should be given to our options list in autocomplete