Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

Question

I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js.

Here is a code sample for Recipe.js:

import React, {Com         


        

Answer 1

Basing on Klugjos answer. You could do the same with React's functional component (FC) and use the useState Hook to manage the state.

import React, {FC} from 'react';
import "./Recipe.css";

interface IRecipeProps {
  ingredients?: string[];
  title?: string;
  img?: string;
  instructions?: string;
}

interface IRecipeState {
}

const Recipe:FC = (props) => {

    const { ingredients, title, img, instructions} = props;

    ingredients.map(( ingredient, index) => (
        

          { ingredient}
        
    ));

    return (
        

            Your render code here
        
    )
}