I discussed in my last blog post how we may convert a pre-hooks class component in an existing application into a hooks-based functional component, focussing on State. This post will consider how you can still access props passed down from a parent component in a legacy application in your newly modified hooks-based component.
This was a lot simpler than State (which was pretty simple itself), but it doesn’t take advantage of the ‘useContext’ hook – this treat is for another blog post!
Pre-Hooks Code
We have a class component with the constructor method at the top of the page.
…and then we call this.props to access the data being passed down by the parent component:
Hooks
We declare our functional component…
…and we pass in props as a parameter to the child component…
…then call props directly – no need for ‘this’ !
Conclusion
That was it – just a simple note of how your newly made hooks component can access props when you’re updating a legacy application -> pass it in as a parameter.