I have two components Checkout.js and Checklist.js I have managed to pass data down form checklist to checkout but I have a function to remove item from checkout but i dont know how to access it through props. How can i Access the removeFood function inside checkout component My Checklist .js

import React from 'react';
import './componentStyle.css';
function CheckList(props) {
    return <div className="checkoutList">
        <form>
            <div>
                <label htmlFor="name">Food</label>
                <input type="text" readOnly id='name' value={props.food}></input>
            </div>
            <div>
                <label htmlFor="price">Price</label>
                <input type="number" readOnly id='price' value={props.price}></input>
            </div>
            <div>
                <label htmlFor="quantity">Quantity</label>
                <input type="number" readOnly id='quantity' value={props.quant}></input>
            </div>
            <div>
                <label htmlFor="total">Total</label>
                <input type="number" readOnly id='total' value={props.total}></input>
            </div>
            
        </form>
        <button style={{
            cursor:"pointer"
        }} onClick={}  type='button'>Remove</button>
    </div>;
}

export default CheckList;

My checkout.js

import React from 'react';
import {useState, useEffect} from 'react';
import CheckList from '../components/CheckList';
import Data from '../data.json';
import OrderBtn from '../components/TrayOrderBtn';

function Checkout(props) {
  const foodItem = (
    Data.myTray.map((item) => <CheckList id={item[Math.random().toString().slice(2)]} key={item.id} food={item['food']} price={item['price']} quant={item['quantity']} />)
  )

 
  var [widget, setWidget] = useState(Data.myTray);

  const removeFood=(item)=> {
    widget.filter((w) => w.id !== item.id)
    
  }
  console.log(widget)
 

  useEffect(() => {
    setWidget(Data.myTray)
  },[widget])
  
  if (Data.myTray.length <= 0) {
    return <div>
      <h1>Add a Food Item to Your Tray</h1>
    </div>
  }else {
    return <div className="checkout">
      {widget.map(
        (item) => <CheckList  key={item.id} food={item['food']} price={item['price']} quant={item['quantity']} />
      )}
      <OrderBtn />
    </div>;
  }
  
}

export default Checkout;

CodePudding user response：

Take a look at the example below-

Suppose you have a component Checkout and you want to pass your delete function to Checklist component so that you can apply a event listener in Checklist component.

Here we are passing our delete function as a prop to Checklist component

Note: -This is just an example how you can implement.

See our Checkout Component

export default function Checkout(){

const handleDelete=(data)=>{
console.log(data);
}

return(
<Checklist handleDelete={handleDelete}/>
)

}

See our Checklist Component

export default function Checklist(props){

return(
<button onclick={()=>props.handleDelete("your target id or anything")}>Delete</button>
)
}

CodePudding user response：

Here is a minimal reproducible example. The add and remove functions are defined in App and passed down to children components Products and Checkout accordingly. Run the code and click some carrot and banana into your cart. Then click ❌ to remove some.

function App() {
  const [cart, setCart] = React.useState([])
  const add = item => e =>
    setCart([...cart, item])
  const remove = index => e =>
    setCart([...cart.slice(0, index), ...cart.slice(index 1)])
  return <div>
    <Products add={add} />
    <Checkout cart={cart} remove={remove} />
  </div>
}

function Products({ add }) {
  const PRODUCTS = ["apple", "banana", "carrot"]
  return <div className="products">
    {PRODUCTS.map((p, key) =>
      <button key={key} type="button" onClick={add(p)} children={p} />
    )}
  </div>
}

function Checkout({ cart, remove }) {
  return <div className="checkout">
    {cart.map((c, key) =>
      <div>{c} <button type="button" onClick={remove(key)} children="❌"/></div>
    )}
  </div>
}

ReactDOM.render(<App/>, document.querySelector("#app"))

.products, .checkout { display: flex; flex-direction: flex-row; flex-wrap: wrap; }
.products > button { padding: 0.5rem; margin: 0.5rem; }
.checkout > div { background-color: #CDECFF; padding: 0.5rem; margin: 0.5rem; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

See Lifting State Up in the React Docs for additional examples.