Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'useState' is not defined no-undef React

Tags:

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;
And that's my package.json

  "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
and I get this error

Line 7:29: 'useState' is not defined no-undef

like image 863
Ethanolle Avatar asked Sep 02 '20 12:09

Ethanolle


People also ask

How do you fix useState is not defined?

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' .

Is not defined no undef 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' .

Is useState function in React?

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.


2 Answers

You need to import "useState":

import React, { useEffect, useState } from "react"; 
like image 86
Nam Bui Avatar answered Sep 30 '22 19:09

Nam Bui


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: "",   }); 
like image 24
Rohan Shenoy Avatar answered Sep 30 '22 18:09

Rohan Shenoy