如何在 react.js 中将钩子值从父级传递给子级

Question

So im working on an inventory app, converting all my class components to functional components.. but when i try to pass the inventory value to the child element, it gives me an error of can't set.map on undefined

this is my app component

const App = () => {

  const [inventory, setInventory] = useState([]);
  const [pointer, setPointer] = useState('')
  const addProduct = (item) => {
    if(inventory.some(product => product.name === item.name)){
      setInventory(
        inventory.map(product => {
          if(product.name === item.name){
            product.quantity += parseInt(item.quantity);
            return product;
          } return product;
        })
      )
      return;
    }
    const newItem = {
      id: uuid(),
      name: item.name,
      quantity: parseInt(item.quantity),
      unit: item.unit
    }
    setInventory(
      ...inventory, newItem
    )
  }
  const updateQuantity = (item)=> {
      // this.Modal.current.toggleModal();
      setPointer(item.id)
  }
  const confirmUpdate = (quantity, pointer) => {
    setInventory(inventory.map(item => {
        if(item.id === pointer){
          item.quantity = quantity;
          return item;
        }
        return item;
      })
    )
  }
  const deleteItem = (id) => {
    setInventory(
      inventory.filter(item => item.id !== id)
    )
  }
  return (
    <div className="App">
      <Header />
      <div className="container">
        <h1 style={{ width: '100%' }}>Inventory</h1>
        <AddItem addProduct={addProduct}/>
        <Inventory updateQuantity={updateQuantity} deleteItem={deleteItem} inventory={inventory}> </Inventory>
      </div>
      <UpdateModal confirmUpdate={confirmUpdate} pointer={pointer}/>
    </div>
  )
}

child component

const Inventory = props => {
    return (props.inventory.map(item => (
        <Item
        key={item.id}
        updateQuantity={props.updateQuantity}
        deleteItem={props.deleteItem} 
        item={item} 
        />)))
    }

All I want is to pass the inventory value in the app component to the inventory component to map it... but I get the following error

TypeError: props.inventory.map is not a function

I'm sure the answer is simple but I'm stuck in a google wormhole and I can't find the answer...

UPDATE...

The attribute is sent as an object not an array for some reason...

console.log(typeof props.inventory) always returns an object no matter what I do...

I tried a couple of methods...

1-Spreading it out as an array inside the attribute value, [...inventory], raises another error

2- Declaring as a new Array() inside the useState hook, still nothing

3- using Array.from(inventory) inside the attribute call, still nothing..

I am new to react so there must be something I'm missing

Answer 1

You are converting the array to Object here:

setInventory({
  ...inventory, newItem
})

It must be:

setInventory([
  ...inventory, newItem
])

Answer 2

So here's what I did wrong...

My hook updating function had a wrong syntax but it was uncaught by react, because apparently the attribute is always passed as an object regardless? I'm not sure..

anyways restructuring my hook function fixed it...

instead of

setInventory(
      ...inventory, newItem
    )

it was

setInventory(inventory =>
      [...inventory, newItem]
    )

yeah, that solved it..