Error:

Type '() => JSX.Element | undefined' is not assignable to type 'FC<{}>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

code:

import { FC, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import { fetchSingleCocktail } from "../redux/features/cocktailSlice";
import { AppDispatch, RootState } from "../redux/store";

export type ingredientsProps = {
  strIngredient1: string|null;
  strIngredient2: string|null;
  strIngredient3: string | null;
  strIngredient4: string | null;
  strIngredient5: string | null;
}

export type ViewCockTailPros = {
  name: string;
  image: string;
  info: string;
  category: string;
  glass: string;
  instructions: string;
  ingredients:ingredientsProps[]
}

const SingleCocktail:FC = () => {
  const { cocktail } = useSelector((state: RootState) => state.app);
  const [modifiedCocktail, setModifiedCocktail] = useState<ViewCockTailPros|null>();
  const dispatch = useDispatch<AppDispatch>();
  const { id } = useParams();

  useEffect(() => {
    dispatch(fetchSingleCocktail({id}))
  }, [dispatch, id]);

  useEffect(() => {
    if (cocktail && cocktail.length > 0) {
      const {
        strDrink: name,
        strDrinkThumb: image,
        strAlcoholic: info,
        strCategory: category,
        strGlass: glass,
        strInstructions: instructions,
        strIngredient1,
        strIngredient2,
        strIngredient3,
        strIngredient4,
        strIngredient5
      } = cocktail[0];
      
      const ingredients = [strIngredient1, strIngredient2, strIngredient3, strIngredient4, strIngredient5];
      const newCocktail = { name, image, info, category, glass, instructions, ingredients };
      setModifiedCocktail(newCocktail);
    } else {
      setModifiedCocktail(null);
    }
  }, [cocktail]);

  if (!modifiedCocktail) {
      return <h2 className="section-title">No cocktail to display</h2>
  }

  if (modifiedCocktail) { 
    const { name, image, category, info, glass, instructions, ingredients } = modifiedCocktail as ViewCockTailPros;
    return (
        <>
        <section className="section cocktail-section">
                <Link to={"/"}>
                  <button className="btn btn-danger" style={{marginTop:"2rem"}}>Go Back</button>
                </Link>
                <h2 className="section-title">{name}</h2>
                <div className="drink">
                  <img src={image} alt={name} />
                  <div className="drink-info">
                    <p>
                      <span className="drink-data">Name:</span> {name}
                    </p>
                    <p>
                      <span className="drink-data">Category:</span> {category}
                    </p>
                    <p>
                      <span className="drink-data">Info:</span> {info}
                    </p>
                    <p>
                      <span className="drink-data">Glass:</span> {glass}
                    </p>
                    <p>
                      <span className="drink-data">Instructions:</span> {instructions}
                    </p>
                    <p>
                      <span className="drink-data">Ingredents</span> 
                      {ingredients && ingredients.map((item:any, index:number) => {
                        return item ? <span key={index}>{item}</span>:null
                      })}
                    </p>
                  </div>
                </div>
        </section>
        </>
      ) 
  }
}

export default SingleCocktail

any one please help me?

CodePudding user response：

Your if statements are constructed in a way that potentially none of them can be executed, thus function can return undefined.

Add return null; at the end of the component to ensure proper return type.