Creating Reusable Components in ReactJS

Learn how to easily create `reusable components` in ReactJS by passing props for custom styles, avoiding code duplication and enhancing maintainability.
---
This video is based on the question stackoverflow.com/q/69702093/ asked by the user 'GurnNova' ( stackoverflow.com/u/10981847/ ) and on the answer stackoverflow.com/a/69702103/ provided by the user 'CertainPerformance' ( stackoverflow.com/u/9515207/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: 2 almost identical components Reactjs

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating Reusable Components in ReactJS

As you embark on your ReactJS journey, one common challenge you might face is managing similar components that need to have different style attributes. Perhaps you find yourself needing a search bar that appears in multiple areas of your application but requires different styles. Copying and pasting the component code is not only tedious but can also lead to maintenance headaches down the line. Fortunately, there is a better way to handle this situation!

In this guide, we'll walk through how to create a reusable component in ReactJS by leveraging props to customize styles. This approach will not only reduce duplication but will also help keep your code DRY (Don't Repeat Yourself).

The Problem

Consider the following example where you have two almost identical components:

[[See Video to Reveal this Text or Code Snippet]]

And another component that is essentially a duplicate, but with a different style:

[[See Video to Reveal this Text or Code Snippet]]

While this works, it’s not efficient. You have two components with nearly identical code except for the class names.

The Solution: Passing Props

The key to solving this issue is to pass a prop to the component that will set the class name dynamically. This means you can create one component to handle both styles.

Here's how you can achieve that:

Step 1: Refactor the Component

Refactor your Searchbar component to accept a prop named inputClass. This prop will be used to provide the appropriate styling class for your input element:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Use the Component with Different Styles

Now, you can use this single component in various parts of your application by passing different class names as props:

[[See Video to Reveal this Text or Code Snippet]]

Benefits of Using Props for Reusability

Reduced Code Duplication: With a single component, you’ve eliminated the need to copy and paste code.

Easier Maintenance: If you need to update the functionality of the search bar, you only need to do it in one place.

Flexible Styling: Multiple styles can be applied effortlessly without creating new components.

Conclusion

Creating reusable components in ReactJS can significantly improve your development process, making your code cleaner and more maintainable. By passing props to customize class names, you can effortlessly manage component styles without the risk of duplication errors.

Remember, the goal is to write clean, reusable code without repeating yourself. Happy coding!