Getting error when trying to use functional component in class component - reactjs

Question

I have two main components. The Recipe.js component which is the parent component, and RecipeCard.js which is the child. I am getting the error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. I am not exactly sure as to why I am getting this error. I was hoping I could get some insight as to what the problem is.
Recipe.js:
import React, { Component } from "react";
import AddRecipe from "./addRecipe";
import "./Recipe.css";
import { Route, BrowserRouter as Router, Switch, Link } from "react-router-dom";
import { useAuth0 } from "#auth0/auth0-react";
import RecipeCard from "./RecipeCard";
class Recipe extends Component {
constructor() {
super();
this.state = {
recipes: [], // State array to hold recipe objects that are fetched from the database
search: ''
};
}
updateSearch(event) {
this.setState({ search: event.target.value.substr(0, 20) });
}
componentDidMount() {
fetch("/getRecipes") //Api call using route from server.js to obtain recipe data
.then((res) => res.json())
.then((recipes) =>
this.setState(
{ recipes },
() =>
//inserts data to the state array of the component
console.log("recipes fetched...", recipes) //confirm that the recipes were fetched in the console
)
);
}
render() {
let filteredRecipes = this.state.recipes.filter(
(recipe) => {
return recipe.recipeName.toLowerCase().indexOf(this.state.search) !== -1;
}
);
return (
<Router>
<div>
<input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)}></input>
<ul>
{filteredRecipes.map((
recipe //iterate through each recipe object in the state array display the id, name and instructions of each recipe
) => (
<li className="Recipes" key={recipe.idrecipe}>
<RecipeCard imgUrl={recipe.imgUrl} id={recipe.idrecipe} name={recipe.recipeName} instructions={recipe.recipeInstruction} />
</li>
))}
</ul>
<Switch>
<Route path="/addRecipe">
<AddRecipe />
</Route>
</Switch>
</div>
</Router>
);
}
}
export default Recipe; //Export the recipe component to be used in the main index.js file
RecipeCard.js:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
export default function RecipeCard(props) {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={props.imgUrl}
title=""
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.name}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.instructions}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}

Answer 1

Hooks can be only used in functional components.
Your Recipe.js is a class component which extends from React.Component.
That's why useAuth0 will fail since it is a hook.
You have two options now. You can either change your Recipe.js into a functional component or use an alternative to useAuth0 which I might guess is a Higher-Order-Component provided by #auth0/auth0-react.
withAuth0 might be a good alternative.
Refs :
https://auth0.com/docs/libraries/auth0-react#use-with-a-class-component
https://reactjs.org/docs/hooks-intro.htm