api 데이터 띄우는 과정 중 시행착

받아온 데이터를 보여주는 이 부분 코드를 수정하고 싶어.

제공한 샘플데이터에 대해 어떤 결과를 보여주길 원하냐면 : ContainerList안에 총 2개의 ListContent 생성(이유: recipe의 ingredient 배열의 길이가 2이니까) : 각 ListContent 에는 온수 100 200 335 샷 300 400 250 이렇게 데이터가 담기길 원해

네, 제공해주신 데이터와 요구사항을 바탕으로 코드를 작성해보겠습니다.

menuData.recipes 배열에서 각 recipe의 ingredient 배열을 순회하며, 각 재료에 대한 수량을 각 버튼에 표시하는 방식으로 코드를 작성하였습니다.

jsx

{menuData &&
  menuData.recipes &&  
  menuData.recipes[0].ingredient.map((ing, index) => (
    <ListContent key={index}>
      <img style={{ margin: "0 0 0 15px" }} src={Drag} />
      <label style={{ marginLeft: "14px", fontFamily: "Pretendard", fontSize: '20px', width: "418px", height: "40px", background: "#FFFFFF", borderRadius: "8px", paddingLeft:'24px', paddingTop:'16px'}}>
        {ing.ingredientName}
      </label>
      {menuData.recipes.map(recipe => {
        const ingredient = recipe.ingredient.find(i => i.seq === ing.seq);
        return (
          <Button key={recipe.cupId}>
            {ingredient ? ingredient.quantity : 'N/A'}
          </Button>
        );
      })}
      <img style={{ margin:"10" }} src={Del} />
    </ListContent>
))}

위의 코드는 아래와 같이 동작합니다:

1. 첫 번째 레시피(menuData.recipes[0])의 모든 재료를 순회합니다.
2. 각 재료에 대해 새로운 ListContent 컴포넌트를 생성합니다.
3. 이 컴포넌트 내부에서는 모든 레시피를 다시 순회하여 해당 재료가 포함된 경우 그 수량을 표시하고, 그렇지 않은 경우 'N/A'를 표시합니다.

이렇게 수정된 코드로 시도해보시고 원하는 결과를 얻을 수 있는지 확인해주세요.