i'm totally beginner in react. I tried to improve my skill day after day. Today im stuck on problem, i want to create dynamic route with JSON characters (here dragon ball z) My routes are correct but i want to show biography on only clicked characters like "i click on goku show goku bio" I want to make it without REACT HOOKS (dont useLocation, useParams ect..). At moment i'm totally stuck
Can you help me ? how can i do?
Thanks for help :)
here is the blitzstack of my project:
I don't know why you are using react-router-dom and then not really use it for what it was designed for. You are working with function components, so as far as I can tell, any solution will require a React hook. Whether you just use the useParams hook to get the id to filter by, or if you declare an id state in the parent with useState, or create a React context and use both useState and useContext, or use Redux and useDispatch and useSelector. Do you see where this is headed?
I suggest just using the useParams hook as it's the most trivial to implement.
Fix the character bio route so the id route match param is easier to read and consume.
<Route path="/CharBio/:id" element={<CharBio />} />
With path="/CharBio:id" the link would inject a leading : character into the id with to={`/CharBio${element.id}`}, i.e. instead of "goku" the id param would be ":goku", and this doesn't work easily for filtering.
Fix the link in Perso so it's linking to a "/CharBio/:id" path.
<Link to={`/CharBio/${element.id}`}>
<h1>{element.id}</h1>
</Link>
Use the useParams hook in the CharBio component and filter the API data by id.
export default function CharBio() {
const { id } = useParams();
const element = API.find(el => el.id === id);
return element ? <p>{element.bio}</p> : null;
}