Currently, I am exploring context and working with a route: /show/:id
In my context, I need to access the params ID of /show/:id. To achieve this, I initialized a state to an empty string in my context and utilized useParams in /show/:id to set the id.
Although it functions as intended, I can't help but wonder if there is a more efficient way to accomplish this and improve the cleanliness of my code.
This is how my app.js is structured:
<Route exact path="/discover" component={Discover} />
<ShowDetailsProvider>
// here I want :id in "showDetailsProvider"
<Route exact path="/show/:id" component={ShowDetails} />
</ShowDetailsProvider>
<Route exact path="/show/episode/:id" component={ShowEpisode} />
Here is my ShowDetailsContext definition:
import { createContext, useState } from "react";
const ShowDetailsContext = createContext();
const ShowDetailsProvider = ({ children }) => {
const [idSerie, setIdSerie] = useState("");
console.log(idSerie);
return <ShowDetailsContext.Provider value={{ setIdSerie }}>{children}</ShowDetailsContext.Provider>;
};
export { ShowDetailsProvider, ShowDetailsContext };
And this is my ShowDetails.js file:
import React, { useContext } from "react";
import { useParams } from "react-router-dom";
import { ShowDetailsContext } from "../context/ShowDetailsContext";
const ShowDetails = () => {
const showDetailsContext = useContext(ShowDetailsContext);
const { id } = useParams();
showDetailsContext.setIdSerie(id);
return (
<>
<p>Show detail page</p>
</>
);
};
export default ShowDetails;