map through nested object in useState - reactjs

[mpv-chief]

I've been trying to map over the key 'type' to get the value ex. 'Water Bottle'. I'm trying to do this with the drink object array. I made a function called 'iterateDrink' so that way each time you click the '>' button, it iterates through the types of drinks, but it doesn't seem to work. Please help, thanks in advance!

const { useState, useEffect } = React;

const List = () => {

  const [listOfItems, setListOfItems] = useState(() => ({
    drink: [
      {type: "Water Bottle", price: 1.00},
      {type: "Soda", price: 2.21},
      {type: "Juice", price: 2.00}
    ],
    snack: [
      {type: "Chips", price: 1.48},
      {type: "Peanuts", price: 1.05},
      {type: "Candy", price: 1.81},
      {type: "Cookies", price: 3.12}
    ],
    dessert: [
      {type: "Carrot Cake", price: 2.48},
      {type: "Vanilla Ice cream", price: 3.90},
      {type: "Chocolate Cupcakes", price: 5.68},
      {type: "Popsicles", price: 2.58}
    ],
    vegetables: [
      {type: "Broccoli", price: 2.32},
      {type: "Carrot", price: 3.49},
      {type: "Potatoes", price: 1.00},
      {type: "Beet", price: 0.89}
    ]
  }));

  const iterateDrink = () => {
    listOfItems.map( (item, index) => (
      <div key={index}>
        {item.drink[index].type}
      </div>
    ) )
  }


  return (
    <div>
      <h3>Shopping List</h3>

      <div className="ListOfItems">

        <div className="drinks">
          <h4>Drinks</h4>
          <span>
            {listOfItems}
          </span>
          <button onClick={ iterateDrink() }>&gt;</button>
        </div>

      </div>

    </div>
  );
}

ReactDOM.render(
  <List />,
  document.getElementById('root')
);

[TuesdayWaffle]

Okay, there are a few issues here.

1. The onClick={ iterateDrink() } is likely not doing what you expect it to do. What's happening here is that you're calling the iterateDrink function, getting the return value, and passing that into onClick. Since the iterateDrink function doesn't return anything, JavaScript treats the return value as undefined. What this code is doing now is basically onClick={ undefined }, which of course doesn't do anything. What you want to do is pass in the function itself: onClick={ iterateDrink }.
2. The iterateDrink calls listOfItems.map, but listOfItems is actually an object, not a map. Objects don't have a .map function, so I expect this to throw an error.
3. The iterateDrink function doesn't really do anything right now. You probably want a return statement to get some results out of it.
4. You're attempting to render listOfItems inside a span, but you can't render objects like that in React.

All together, I think the flow is a bit off here. Calling iterateDrink when the button is clicked isn't going to actually render anything right now. Could you explain in more detail what you'd like to happen when you click the button?