/lab-react-hoc-render-props-boilerplate

Primary LanguageHTML

Logo-nav

Learning Goals:

In this lab the aim is to understand and use the following concepts in order to Share stateful logic between components:

  1. Higher Order Components
  2. Render Props

Steps to follow:

  1. Clone this repository - as it have some boilerplate already for you.
  2. Insall all the dependancies used in this project by using the following command -> npx i or npx install.
  3. Run the application by using npm run dev. You should be able to see the application running as shown below:

Task:

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:

  1. Higher Order Components
  2. Render Props

Create two different projects -

  1. In the first project -> solve the issue by HOC.
  2. 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 ❤️!