useState e default değer girince hata alıyorum, boş bırakınca problem yok çalışıyor ama default değer girmeliyim ki butona basmadan da sayfa yüklenince listeden bir tanesi gösterilsin boş kalmasın sayfa..
Aşağıda görüldüğü üzere activeTabs değerine göre ul list döndürecek. Hangisine tıklandıysa o liste basılacak ekrana.
7, 61 ve 73. satırlar
import { useEffect, useState } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import React from "react";
function Recipe() {
const [details, setDetails] = useState([]);
const [activeTabs, setActiveTabs] = useState("ingredients");
const params = useParams();
const getDetails = async () => {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
"X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
},
};
setDetails([]);
await fetch(
`https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
options
)
.then((response) => response.json())
.then((response) => {
setDetails(response[0]);
console.log(response[0]);
});
};
useEffect(() => {
getDetails();
}, [params.id]);
return (
<DetailWrapper>
<div>
<div>
<h2>{details.title}</h2>
</div>
<img src={details.img} alt={details.title} />
</div>
<Info>
<div>
<Button
className={activeTabs === "instructions" ? "active" : ""}
onClick={() => setActiveTabs("instructions")}
>
Instructions
</Button>
</div>
<div>
<Button
className={activeTabs === "ingredients" ? "active" : ""}
onClick={() => setActiveTabs("ingredients")}
>
Ingredients
</Button>
</div>
<div>
<ul>
{activeTabs === "ingredients" &&
details.ingredients.map((ingredient) => (
<li>
{ingredient.amount +
" " +
ingredient.ingredientValue +
" " +
ingredient.ingredientKey}
</li>
))}
</ul>
<ul>
{activeTabs === "instructions" &&
details.descriptionSteps.map((steps) => (
<li key={steps.step}>{steps.description}</li>
))}
</ul>
</div>
</Info>
</DetailWrapper>
);
}
export default Recipe; 
