"Uncaught TypeError: inventories.map is not a function".?

Question

After deleting an item from the database and updating the UI with hook, I am getting this error saying

"Uncaught TypeError: inventories.map is not a function".

What could be wrong with my code and How to solve this issue? Here is the full code:

const ManageInventories = () => {
  const [inventories, setInventories] = useInventory()

  const handleDeleteItem = (id) => {
    fetch(`http://localhost:5000/manageinventories/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ id })
    })
      .then((response) => response.json())
      .then((data) => {
        setInventories(data)
      })
  }
  return (
    <div className="manage-inventories-style">
      <h3 className="pt-3 mb-3">Manage Inventories</h3>
      <Container>
        <Table size="lg" striped bordered hover variant="dark">
          <tbody>
            {inventories.map((inventory) => (
              <InventoryDetails key={inventory._id} inventory={inventory} handleDeleteItem={handleDeleteItem}></InventoryDetails>
            ))}
          </tbody>
        </Table>
        <div className="mt-3 pb-5">
          <Link className="manage-inventories-btn d-flex align-items-center justify-content-center w-25 mx-auto" to="/additem">
            Add new Item
            <FontAwesomeIcon className="me-2 ms-2" icon={faLongArrowAltRight}></FontAwesomeIcon>
          </Link>
        </div>
      </Container>
    </div>
  )
}

Answer 1

The issue with your stuff is inventories is a promise and render is running before promise resolved

{
   inventories && inventories.map(inventory => <InventoryDetails
                                key={inventory._id}
                                inventory={inventory}
                                handleDeleteItem ={handleDeleteItem}
                            ></InventoryDetails>)
}

you also csn use if else rendering that will be great although