How to solve the problem with 'map' function on React?

Question

I'm doing project on React.js. I'm mapping the array and the error saying that the array is undefine even if it exists

    <ul>
      {details.extendedIngredients.map(ingredient => (
        <li id={ingredient.id}>{ingredient.original}</li>
      ))}
    </ul>

Full code:

import { useEffect, useState } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";

function Recipe() {
  let params = useParams();
  const [details, setDetails] = useState({});
  const [activeTab, setActiveTab] = useState("instructions");

 const fetchDetails = async () => {
    const data = await fetch(
      `https://api.spoonacular.com/recipes/${params.name}/information?apiKey=${process.env.REACT_APP_API_KEY}`
);
const detailData = await data.json();
setDetails(detailData);
};

useEffect(() => {
fetchDetails();
}, [params.name]);
console.log(details.extendedIngredients);

return (
  <DetailWrapper>
    <div>
      <h2>{details.title}</h2>
      <img src={details.image} alt="" />
   </div>
  <Info>
    <Button
      className={activeTab === "instructions" ? "active" : ""}
      onClick={() => setActiveTab("instructions")}
    >
      Instructions
    </Button>
    <Button
      className={activeTab === "ingredients" ? "active" : ""}
      onClick={() => setActiveTab("ingredients")}
    >
      Ingredients
    </Button>
    <div>
      <h3 dangerouslySetInnerHTML={{ __html: details.summary }}></h3>
      <h3 dangerouslySetInnerHTML={{ __html: details.instructions }}></h3>
    </div>
    <ul>
      {details.extendedIngredients.map(ingredient => (
        <li id={ingredient.id}>{ingredient.original}</li>
      ))}
    </ul>
  </Info>
</DetailWrapper>
 )}

 export default Recipe;

Answer 1

As setDetails supposed to save the details received from your API in an array, I guess that it must be initialised as an empty array

const [details, setDetails] = useState({});

As it will be an empty array, there will be no render when the component will be mounted from react.

Should be: const [details, setDetails] = useState({});

Answer 2

edit this three parts:

first Part:

useEffect(() => {
fetchDetails().then(res=>
  {setDetails(res.data); console.log(res)}
);
}, []);

second Part:

<ul>
  {details?.extendedIngredients?.map(ingredient => (
    <li id={ingredient.id}>{ingredient.original}</li>
  ))}
</ul>

third Part:

 const fetchDetails = async (params) => {
    const data = await fetch(
      `https://api.spoonacular.com/recipes/${params.name}/information? 
     apiKey=${process.env.REACT_APP_API_KEY}`

      return data;
  );