DEV Community

Discussion on: Learn how to create reusable components in reactjs.

Collapse
 
rleija_ profile image
Ruben • Edited

All you did was put a React wrapper around the HTML button element and called a reusable component.

All the props Button accepts are already accepted by native button HTML. Just reuse button and add css if you want to make it different. Thoughts?

Collapse
 
gkhan205 profile image
Ghazi Khan

Hi Ruben, I'm glad you viewed the video and shared your thought on that.

Yes, I have created a wrapper above the native html button with my predefined class/styling to make the button consistent in overall application which can be tested. I missed one prop there for disabling button when some condition requires it.

My thought process in making this component was to create a button component which should match the design system of my application and I don't need to use HTML native button where ever I need button to be displayed in application rather to keep a short code to be used in application and that one liner component will handle the consistency of design system in application with less code.

For example this code is much more simpler to use in overall application

  <Button value='Login' onClick={this.handleClick} />

rather than this

<button class="app-button" onClick={this.handleClick}>
    Login
</button>

This is my thought process in making button component as separate component to be used in app. I would love to hear from all so that we can make a good solution which can help many of us. :)