I'm trying to use react hooks for a simple problem. I believe the solution is stupid but I don't see it. I Tried to see in my package.json but didn't found the solution. and I'm pretty sure that I'm declaring my state in a good way.
import React, { useEffect } from "react"; import "./App.css"; import Chuck from "./gettyimages-83457444-612x612.jpg"; import axios from "axios"; function App() { const [state, setState] = useState({ joke: "", }); useEffect(() => { fetchData(); }, []); const fetchData = async () => { const result = await axios.get("https://api.chucknorris.io/jokes/random"); console.log(result.data.value); setState({ ...state, joke: result.data.value }); }; return ( <div className="container"> <div className="row"> <div className="col-6"> <h1 className="title">Chuck API</h1> <img src={Chuck} alt="ChuckNoris" /> </div> <div className="col-6 searchJokeCol"> <div className="card"> <div className="card-header"> <span>Search for the Phrase of Chuck</span> </div> <div className="card-body"> <input type="text"></input> </div> </div> <div> <button className="btn btn-warning btn-lg">Just CLICK!</button> </div> </div> </div> <h2 className="subTitle"> Here is The joke</h2> <h4>{state.joke}</h4> </div> ); } export default App;
"dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "react-test-renderer": "^17.0.0-rc.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "ej
Line 7:29: 'useState' is not defined no-undef
The "Uncaught ReferenceError: useState is not defined" occurs when we use the useState hook in our code but forget to import it. To solve the error, import the hook before using it - import {useState} from 'react' .
The React. js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class or a variable in our code before using it. To solve the error, make sure to import the value before using it in your code, e.g. import {myFunc} from 'my-package' .
The React useState Hook allows us to track state in a function component. State generally refers to data or properties that need to be tracking in an application.
You need to import "useState":
import React, { useEffect, useState } from "react";
I see that you have missed useState import.
Either you need to add like
import React, { useEffect, useState } from "react";
or make it React.useState
i.e.
const [state, setState] = React.useState({ joke: "", });
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