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

You need to define what your props and state will look like using an interface and TypeScript's generic implementation of React.Component

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

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

interface IRecipeState {
}

class Recipe extends Component {
    render() {
        const ingredients = this.props.ingredients.map((ing, ind) => (
            
{ing}
        ));
        const {title, img, instructions} = this.props

        return (
            

                Your render code here
            
        )
    }
}

• I would change the file extension to .tsx to indicate that it is a React file using TypeScript -> Recipe.tsx
• Please adjust the types (strings) to fit your data.
• Use IRecipeState to define the structure of your Component state (this.state.fooBar). It is ok to leave it empty for now, since you don't make use of the state.
• Make sure you do the same for your other Component that throws an error (RecipeList.js)