How to Use useParams Hook in Class Component in React

Hello Devs,

Since hooks wont work with class based components you can wrap it in a function and pass the properties along. In this tutorial, I will show you that how to use useparams hook in react class component. You know that we can use react hook only functional components. But in this example, I will show you a simple way to use react useparams hook in class based components.

You know that, sometimes you may need to use useparams hook in class based component. So i am hare to share with you how to use useparams in react class based component.

class TaskDetail extends React.Component {
    componentDidMount() {
        const { id } = this.props.params;
        // ...
    }
}

 

Now we have to wrap up our useParams as a function with the component. See the example:

export default (props) => (
    < TaskDetail
        {...props}
        params={useParams()}
    / >
);

 

Read also: How to Create React Bootstarp Tags Input Example

 

Hope this can help you.

 

Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js