Untitled

import { useEffect, useState } from 'react';

function RecipeDetails({ RecipeType, RecipeId }: any) {
  const [details, setDetails] = useState([]);

  useEffect(() => {
    async function CatchRecipe() {
      let address = '';
      if (RecipeType === 'drinks') {
        address = `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${RecipeId}`;
      } else if (RecipeType === 'meals') {
        address = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${RecipeId}`;
      }
      const data = await fetch(address);
      const response = await data.json();
      setDetails(response[`${RecipeType}`]);
    }
    CatchRecipe();
  }, []);
  return (
    <div>
      {details.length > 0 && (
        <div>
          <img
            data-testid="recipe-photo"
            src={ details[0][`str${RecipeType}Thumb`] }
            alt={ details[0][`str${RecipeType}`] }
          />
          <h2 data-testid="recipe-title">{ details[0][`str${RecipeType}`] }</h2>
          {RecipeType === drinks ? (<p data-testid="recipe-category">
            {details[0].strAlcoholic}
          </p>)
            : (<p data-testid="recipe-category">{details[0].strCategory}</p>)}
        </div>
      )}

    </div>
  );
}

export default RecipeDetails;