Tengo un problema al obtener datos en el componente del archivo de contexto. Intento enviar accesorios desde el archivo de contexto al componente necesario, pero recibo el Objeto vacío. Adjunté mi código, no entiendo cómo puedo usar React Hooks para resolver este problema.

1. aplicación

 import SingleRoom from "./pages/SingleRoom" import {BrowserRouter, Routes, Route } from "react-router-dom"; import {RoomProvider} from "./context"; function App() { return ( <RoomProvider> <BrowserRouter> <Navbar /> <Routes> <Route path="/rooms/:slug" element={<SingleRoom />} /> </Routes> </BrowserRouter> </RoomProvider> ); }

2. contexto

 import items from "./data" const RoomContext = React.createContext(); class RoomProvider extends Component { state = { rooms: [] }; getRoom = slug => { let tempRooms = [...this.state.rooms]; const room = tempRooms.find(room => room.slug === slug); return room; }; render() { return ( <RoomContext.Provider value={{...this.state, getRoom: this.getRoom}} > {this.props.children} </RoomContext.Provider> ) } } const RoomConsumer = RoomContext.Consumer; export {RoomProvider, RoomConsumer, RoomContext};

3. Habitación individual

 import { Link } from 'react-router-dom' import { RoomContext } from '../context' export default class SingleRoom extends Component { constructor(props) { super(props); this.state = { slug: this.props.match.params.slug }; } static contextType = RoomContext; render() { const { getRoom } = this.context; const room = getRoom(this.state.slug); return ( <div>SingleRoom</div> ) } }