Hola, estoy creando una página de inicio de sesión en reaccionar y estoy enviando las variables y las funciones de inicio de sesión a otros archivos a través del método <Component.Provider value={} /> pero no está registrando que me estoy refiriendo a las variables anteriores. ¿Cómo arreglo eso?

Nota: state se minimiza pero debería ser

 var state = { token: null, userId: null, };

Editar: advertencia en el texto según la solicitud

Código:

 import React, { Component } from 'react'; import { BrowserRouter, Route} from 'react-router-dom'; import {Routes} from 'react-router-dom'; import {Navigate} from 'react-router-dom'; // import {Routes} from 'react-router-dom'; import './App.css'; import AuthPage from './pages/Auth'; import EventsPage from './pages/Events'; import BookingsPage from './pages/Bookings'; import MainNavigation from './components/Navigation/MainNavigation'; import AuthContext from './context/auth-context'; function App() { var state = { token: null, userId: null, }; function login(token, userId, tokenExpiration) { this.setState({token: token, userId: userId}); }; function logout() { this.setState({token: null, userId: null}) }; return ( <BrowserRouter> <React.Fragment> <AuthContext.Provider value={{ token: this.state.token, userId: this.state.userId, login: this.login, logout: this.logout }}> <MainNavigation /> <main className="main-content"> <Routes> <Route path="/" element={<Navigate to="/auth" replace={true}/>} /> <Route path="/auth" element={<AuthPage />} /> <Route path="/events" element={<EventsPage/>} /> <Route path="/bookings" element={<BookingsPage/>} /> </Routes> </main> </AuthContext.Provider> </React.Fragment> </BrowserRouter> ); } export default App;

Advertencia:

 WARNING in src\App.js Line 1:17: 'Component' is defined but never used no-unused-vars Line 16:10: 'state' is assigned a value but never used no-unused-vars Line 20:14: 'login' is defined but never used no-unused-vars Line 23:14: 'logout' is defined but never used no-unused-vars webpack compiled with 1 warning