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" }
js error "Property does not exist on type 'Readonly<{}>'" occurs when we try to access the props or state of a class component which we haven't typed. To solve the error, use the generic on the React. Component class to type the props or state objects of the class.
The React. js error "Property 'children' does not exist on type" occurs when we try access the children property in a component for which we haven't typed the prop. To solve the error, type the children prop in the component as React. ReactNode .
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> ) } }
.tsx
to indicate that it is a React file using TypeScript -> Recipe.tsx
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.RecipeList.js
)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<IRecipeProps> = (props) => { const { ingredients, title, img, instructions} = props; ingredients.map(( ingredient, index) => ( <li key={index}> { ingredient} </li> )); return ( <div className="recipe-card"> Your render code here </div> ) }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With