How do I deconstruct and display res from strapi api with usestate?

Question

Im trying to display the titles, price, description and allergies from the strapi Api:http://localhost:1337/api/pizzasarpsborgs.

api

Not really sure how to deconstruct the res. Can someone help?

This is my current code:

export default function Menu() {
  const [pizzasarpsborgs, setPizzas] = useState(['']);

  async function fetchPizza() {
    const res = await fetch('http://localhost:1337/api/pizzasarpsborgs');
    const data = await res.json();
    setPizzas(data.data);
  }

  useEffect(() => {
    fetchPizza();
  }, []);

  return (
    <div>
      {pizzasarpsborgs.map((pizza) => (
        <p key={pizza.id}>{pizza.id}</p>
      ))}
    </div>
  );
}```

Answer 1

can you try the following and let me know if it works.

{pizzasarpsborgs.length ? pizzasarpsborgs.map((pizza) => (
    <div key={pizza.id}>
        <h1>{pizza.attributes.title}</h1>
        <p>{pizza.attributes.price}</p>
        <p>{pizza.attributes.description}</p>
        <p>{pizza.attributes.allergies}</p>
    </div>
)) : null}

I don't have the development environment setup as of now, so I am writing this off the top of my head. So please let me know if any errors pop up.