endmd adlı üyeden alıntı: mesajı görüntüle
Merhaba,
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;
Hata verilen state tam neresi bilmiyorum ama muhtemelen boş geldiği kısımda yazdığınız fonksiyonu çalıştırmıyordur. State adlarını kullanırken örneğin state içindeki alanı map ederken stateadi.map yerine satateadi?.map kullanırsanız, veri olduğu taktirde içeri girmesini sağlayacağı için içeri girmesini sağlar. Sanıyorum ki ingredient.amount diyorsunuz ama ilk aşamada boş olduğu için içerisine öyle bir obje gelmediği için crash oluyor onun yerine kullandığınız tüm yerleri ingredient?.amount gibi yazarsanız problem çözülecektir