Update array of items with help of modal input in React

Question

I didn't find any suitable answer for this question. Here is what I am looking for.

I have lists of menus items coming from the state array variable (https://i.stack.imgur.com/rOWg2.png).
I have an add button which opens a modal. Modal includes an input field. (https://i.stack.imgur.com/a0COe.png)
The final result would be when some click adds button of modal, its field values updated in menus state array. which further updates the menus list on UI.

I able to made all these UI. But I didn't have any idea how can I pass my data from modal input to menus list. Here is codesandebox link of the same problem (https://kx6yr.csb.app/).

As per another of your questions I have commented on, there is a guideline on Stack Overflow that questions should be mostly self-contained. Could you edit this question to add a representative sample of this code to the question itself? — halfer, May 22 '20 at 10:15

score 1 · Answer 1 · answered May 22 '20 at 08:10

1

There is a way to solve your problem : You have to give a callback props to your Modal component. As it, The modal will be able to add an item.

There is the codesandBox : https://codesandbox.io/s/friendly-boyd-ptxem

answered May 22 '20 at 08:10

benjamin Rampon

1,316
11
18

score 0 · Accepted Answer · answered May 22 '20 at 08:10

So this is one way to do it, in your modals add this onAdd prop:

 <AddModal
  heading="Add Food"
  modalId="addFood"
  inputName="addFood"
  onAdd={(textEntered) => { alert(textEntered); }}
  ref={this.foodModal}
/>
<AddModal
  heading="Add Drink"
  modalId="addDrink"
  inputName="addDrink"
  onAdd={(textEntered) => { alert(textEntered); }}
  ref={this.drinkModal}
/>

And within the modal component, call this handler passing the input value:

    <button
      type="button"
      onClick={this.props.onAdd.bind(this, this.state.item)}
      className="golden-button-op"
      style={{ margin: "0px" }}
    >
      Add
    </button>

Hope it helps!

Update array of items with help of modal input in React

2 Answers2