是否可以将 setValue 作为 function 传递给子组件

Question

I have the following setup in react, now it complains that setClose is not a function inside the add to cart. I am stuck as to how I would trigger the setclose useState from inside the add to cart componenet, I guess I can't pass it as a prop down to the child. Not sure what to do at this point.

Thanks ahead of time

main component

const [close, setClose] = useState(true)

  const toggleCart = () => {
    setClose(!close)
  }

return (
  <AddToCart
    cartAdd={setClose}
  />
  {close ? <CartItems /> : null}
)

add to cart componenet

import React from "react"

import { useShoppingCart, formatCurrencyString } from "use-shopping-cart"

const AddToCart = ({ sku, setClose }) => {
  const { addItem } = useShoppingCart()
  const test = () => {
    setClose(false)
  }
  return (
    <div>
      <button onClick={(() => addItem(sku), test())}>ADD TO CART</button>
    </div>
  )
}

export default AddToCart

Answer 1

const [close, setClose] = useState(true)

  const toggleCart = () => {
    setClose(!close)
  }

return (
  <AddToCart
    cartAdd={toggleCart}
  />
  {close ? <CartItems /> : null}
)

const AddToCart = ({ sku, cartAdd }) => {
  const { addItem } = useShoppingCart()
  const handleButtonClick = () => {
     addItem(sku);
     cartAdd();
  }
 
  return (
    <div>
      <button onClick={handleButtonClick}>ADD TO CART</button>
    </div>
  )
}

use like this

UPDATED