React Select menu - Select multiple items - Advanced - node.js

Question

I have to make a select menu in react but there is an extra couple functions it needs to have that I haven’t been able to find on the first 50 links of google. (I’m not googling the right thing obviously cause idk what it’s called).
Details:
A select menu that, once an item is selected, carries the item far below the select menu so that the item can be manipulated further. For example, I want to select multiple ingredients and then have them displayed on the same page, in order of selection, and then be able to enter an amount in a text field that is next to the ingredient that has been selected.
Process:
Select paprika (remove paprika from select menu because there is no need to select it again) > see paprika appear far below select menu > enter amount of paprika in text field tied to back end > repeat for other ingredients.
Any help would be greatly appreciated. Even if you just tell me what to google.
Thank you all,
Matt

Answer 1

I tried to write this up in JSFiddle but it was tripping out on me.... Here should be an Almost working example with the same approach that Joss mentioned. I think you'll be able to get the idea from it
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: [],
};
}
select(e) {
const { value } = e.currentTarget;
let { selected } = this.state;
if(selected.contains(value)) {
selected = selected.filter((val) => val !== value);
} else {
selected.push(value);
}
this.setState({
selected,
});
}
render() {
const ret = []; //Just using this to map over to create options
for(i = 0; i < 5; i++) {
ret.push(i);
}
return (
<div className="container">
{ ret.map((i)=>(
<div
onclick={this.select}
value={i}
className={this.state.selected.contains(i) ? 'selected' : null}>
{i}
</div>
)}
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('container')
);

Answer 2

I would have an array stored in state that would contain all selected ingredients, which would be updated each time a new ingredient is selected (using onChange). I would then simply use this array to influence what is displayed on the rest of the page.