How to create a React Button - Robin Wieruch

A button may be the first interactive element that you are using in a React component. Therefore, this is a short React tutorial by example for beginners about creating a button in React, how to use it, and how to extract it as a reusable component. First of all, a button is just an HTML button element which can be rendered in React’s JSX:

By using an event handler in React , we can react to the button’s click event:

This way, a button can be used to trigger various effects when clicking it. For example, it can change a stateful value by using React’s useState Hook :

Another example would be toggling a conditional rendering :

Anyway, whatever this button is performing on its onClick handler after all, you may want to create a reusable component for it. Therefore, we will extract it as a new function component and pass the necessary props to it:

Our Button component is a reusable component now. For example, if you would give your input field some CSS style in React , every Button component which is used in your React project would use the same style.

If you would want to create a button group now, you could just use multiple Button components side by side:

From here you can extend your Button component with many features. For example, the type is not always button, but can be submit for handling forms in React. Therefore we could enable developers from the outside to pass an optional type prop for the Button which defaults internally to button if nothing is passed:

Or you can pass a disabled prop to the Button component whenever it should not be clickable. Since it defaults to undefined if it is not provided, the button element will not be disabled:

However, passing all these extra information to the Button component is cumbersome. In a perfect world, all this information should be taken by the Button component the same way as if we would be using a mere button element. We can make this happen by using the JavaScript’s rest destructuring for React’s props:

Now, whether we pass a disabled boolean or a style object to the Button component, internally it will pass it to the button element. This way, the Button element behaves similar to the button element. Everything that’s more explicit, like the onClick handler or the default value for the type prop, needs to be written explicitly in the Button component’s function signature.