I am trying to add the dark mode, but currently facing a problem in which compiler shows that

src/App.js Line 16:36: ‘useState’ is not defined no-undef Line
17:48: ‘useState’ is not defined no-undef Line 18:58: ‘useState’
is not defined no-undef

I don’t understand why I am getting such error because I have passed the values using props. can someone check and tell me what’s wrong and explain me a bit of concept?

Thanks in advance.

App.js:

import './App.css';
import React from 'react'
import Form from './Components/Form';
import Message from './Components/Message'
import Home from './Components/Home'
import 'bootstrap/dist/css/bootstrap.min.css';
import Headers from './Components/Header';
import UpperCase from './Components/UpperCase';
import {
  BrowserRouter as Router,
  Routes,
  Route
} from "react-router-dom";

function App() {
  const[darkMode,darkModeChange] = useState('light');
  const[buttonText,darkModeChangeTextButton] = useState('Enable Dark Mode');
  const[buttonTextStyle,darkModeChangeTextButtonStyle] = useState({color:'fff'});
 
  const darkModeOnChange = () => {
    if(darkMode === 'light'){
   darkModeChange('dark');
   darkModeChangeTextButton('Disable Dark Mode');
   darkModeChangeTextButtonStyle({color: '#fff'});
   document.body.style.backgroundColor = '#020046';
 
  }else{
   darkModeChange('light');
   darkModeChangeTextButton('Enable Dark Mode');
   darkModeChangeTextButtonStyle({color: '#212529'});
   document.body.style.backgroundColor = '#fff';
  }
 }
  return (
    <Router>
    <div>
      <Headers buttonText={buttonText} buttonTextStyle={buttonTextStyle} mode={darkMode} changeMode={darkModeOnChange}></Headers>
     
        <Routes>
      
         <Route path="/" element={<Home />}>
      </Route>
        <Route path="/home" element={<Home />}>
      </Route>
        <Route path="/form" element={<Form />}>
        </Route>
        <Route path="/message" element={<Message />}>
        </Route>
        <Route path="/UpperCase" element={<UpperCase />}>
        </Route>
        
        </Routes>

    </div >

    </Router>
  )
}
export default App;

Header.js:

import React, { useState } from "react";
import { Link } from "react-router-dom";

function Headers(props){

 
    return (
        <div>
       <nav className={`navbar navbar-expand-lg navbar-${props.darkMode} bg-${props.darkMode}`}>
  <div className="container-fluid">
    <Link className="navbar-brand" to="/home">Sanad's Blog</Link>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/form">Form</Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/message" aria-disabled="true">Message</Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/UpperCase">Upper Case Tool</Link>
        </li>
      </ul>
      <div className="form-check form-switch">
  <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"onChange={props.darkModeOnChange} />
  <label style={props.buttonTextStyle} className="form-check-label" htmlFor="flexSwitchCheckDefault">{props.buttonText}</label>
</div>
     
    </div>
  </div>
</nav>
        </div>
    );
    
}
export default Headers

UPDATE

after importing the { useState } in App.js and removed from Header.js

I am not able to get props values in Header.js
Props values are getting rendered as Undefined
why is that?

>Solution :

You forgot to import the useState method in the App.js line #2

Please replace in App.js the line:

import React from 'react'

By:

import React, { useState } from "react";

This is why the App.js complained about the undefined useState.