I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badminton" should be visible.
This is how my JSON data will look:
"details": [
{ "id": "12wer1", "name": "ABC", "age": 15, "game": "badminton" },
{ "id": "78hbg5", "name": "FRE", "age": 21, "game": "Hockey" }
]
Below is a sample code snippet:
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={{ width: 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 am unsure about how to proceed with hiding the selected option. Can someone assist me with this issue? Thank you in advance.