In this lab the aim is to understand and use the following concepts in order to Share stateful logic between components:
- Higher Order Components
- Render Props
- Clone this repository - as it have some boilerplate already for you.
- Insall all the dependancies used in this project by using the following command ->
npx i
ornpx install
. - Run the application by using
npm run dev
. You should be able to see the application running as shown below:
If you observe, LikeImage.jsx
and LikePost.jsx
-> you will notice that, most of logical part is quite similar in both the files. Only the variable names are different, rest everything is similar. This obviously is not a good practice.
Your task is to solve this code duplicacy
issue by using the following two concepts:
- Higher Order Components
- Render Props
Create two different projects -
- In the first project -> solve the issue by HOC.
- In the second project -> solve the issue by Render props.
You can use any method ( class component
or functional component
) - in order to implement the above two concepts.
Happy Coding ❤️!