CODEWITHSUNDEEP
reactjstypescriptreact-lifecycle
Pranay kumar
Pranay kumar

Reputation: 2197

Update array of items with help of modal input in React

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

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/).

Upvotes: 0

Views: 1086

Answers (2)

benjamin Rampon
benjamin Rampon

Reputation: 1416

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

Upvotes: 1

devcrp
devcrp

Reputation: 1348

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!

Upvotes: 0

Related Questions