i'm working on react router project (im beginner) to improve my skillz.
my problem:
I have a JSON file (Dragon ball Z). When i click on characters (like goku) i want to show his biography. Actually when i click on goku every biography of each characters are showed.
I know how to do it with function component (useLocation ect..) but i'm totally stuck wicth class component because i can't use hooks in it, what is the good way to do it ?
here is the project : DBZ REACT ROUTES
Thanks
Using react-router-dom v6 we can use useParams to read the params key within function component.
With class component you can write an HOC function to archive the same thing
a higher-order component is a function that takes a component and returns a new component
import { useParams } from 'react-router-dom'
function withParams(Component) {
return props => <Component {...props} params={useParams()} />;
}
class Charbio extends React.Component {
componentDidMount() {
let { id } = this.props.params;
// get the bio by id here
}
render() {
return API.map((element) => {
return <p>{element.bio}</p>;
});
}
}
export default withParams(Charbio);