How Can I access a function through props in another component

Question

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;

Answer 1

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.