Question

22

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

rated 0 times [ 28] [ 6] / answers: 1 / hits: 50476 / 6 Years ago, sun, september 9, 2018, 12:00:00

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, {Component} from 'react';

import "./Recipe.css";



class Recipe extends Component {



    // props: any; uncommenting this will fix the bug



    render() {

        // don't have to use return and parentheses for arrow with JSX

        const ingredients = this.props.ingredients.map((ing, ind) => (

            <li key={ind}>{ing}</li>

        ));

        const {title, img, instructions} = this.props



        return (

            <div className="recipe-card">

                <div className="recipe-card-img">

                    <img src={img} alt={title}/>

                </div>

                <div className="recipe-card-content">

                    <h3 className="recipe-title">

                        {title}

                    </h3>

                    <h4>

                        Ingredients:

                    </h4>

                    <ul>

                        {ingredients}

                    </ul>

                    <h4>

                        Instructions:

                    </h4>

                    <p>

                        {instructions}

                    </p>

                </div>

            </div>

        )

    }

}

Screenshot of .props error

However, the project throws no compile-time errors and the website works perfectly fine.

Screenshot of app working fine with no chrome console or terminal errors

I'm thinking this less has to do with my code and more so with TypeScript or some sort of preset config with Javascript for VScode having trouble identifying the .props property for each component because I get similar problems when I built the React Tutorial Project into my editor (I even copy pasted the final index.js code from the site just to be sure), despite the app working fine with no compile-time errors.

Screenshot of the same .prop errors after following React Tutorial

The only way to solve this problem is if I actually hardcode and create a props property for each class and set it to any like so:

Screenshot of only solution to the syntax error

Here are my updated dependencies

"dependencies": {

  "@types/react": "^16.4.13",

  "prop-types": "^15.6.2",

  "react": "^16.5.0",

  "react-dom": "^16.5.0",

  "react-scripts": "1.1.5",

  "typescript": "^3.0.3"

 }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylondaytond

Add To Favorites

Follow

Total Points: 92

Total Questions: 88

Total Answers: 96

Location: China

Member since Fri, Jan 15, 2021

3 Years ago

dylondaytond questions

1 React Material UI TextField onchange handler continue default action

Fri, Jun 10, 22, 00:00, 2 Years ago

1 React Autocomplete with Material UI

Tue, Jun 22, 21, 00:00, 3 Years ago

1 ERROR Error: formGroup expects a FormGroup instance. Please pass one in

Tue, Sep 22, 20, 00:00, 4 Years ago

1 Implicitly checking if axios call was success

Thu, May 7, 20, 00:00, 4 Years ago

1 Vue split components from a single .js file in multiple files

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 6 Years ago berenices · Accepted Answer

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<IRecipeProps, IRecipeState> {

    render() {

        const ingredients = this.props.ingredients.map((ing, ind) => (

            <li key={ind}>{ing}</li>

        ));

        const {title, img, instructions} = this.props



        return (

            <div className=recipe-card>

                Your render code here

            </div>

        )

    }

}

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)