In this article, we’ll discuss how to use the onClick event handler to render (or hide) components in React.

You’ll also learn how to use CSS to hide or show component after user clicks a button.

Use onClick to render a component in React

To implement this feature, you need a boolean value that represents whether a component should be rendered or not. If true, the component will be rendered. If false, component won’t render.

You’re going to have a button that changes state value. If it’s false (component is not rendered) clicking the button will set it to true (component will be rendered), and vice versa.

Finally, in JSX you need an expression that evaluates the expression (the boolean value) and renders (or doesn’t render) the component.

This code does three things:

1. useState() hook creates a state variable show. Its value is a boolean, true by default. Later we will evaluate show to render a component if it’s true, and not render it if it’s false.
2. Create a button and set its onClick event handler to a function that flips the show boolean value. If it’s true, the function sets show to false, and vice versa. We use the setShow() function to update show value.
3. Use curly braces to embed a ternary operator in JSX. It should evaluate show. If it’s true, ternary operator should render <Box /> component, if not, return null.

This is how React onClick renders a component. It changes state variable, and then ternary operator renders the component.

As a bonus, we also embed ternary operator to dynamically change content of the button. When the component is hidden, the button says ‘Show component’.

After React onClick renders the component, button says ‘Hide component’.

Render different components after onClick event in React

In the previous example, we conditionally render a component if user clicks the button. If users don’t click the button, then ternary operator renders null.

You could easily replace null with another component. So when user clicks a button, React onClick renders a component X. If not, it will render component Y.

Think of it this way: one component (or a set of components) should be rendered by default. If user clicks a button, onClick event handler should render other component(s) instead.

Use CSS to hide and show components after click

You can use a ternary operator to hide or display a component after user clicks a button.

In the parent component, create the same boolean value as before and use a button and onClick handler to flip the boolean value.

Use props to pass down the boolean to child component that you want to show after user clicks a button. In the child component, use conditional styles to set main container’s visibility CSS property.

If visibility property is set to hidden, then React component will be hidden. Hidden is the keyword here. Component is rendered and in the page flow, but it’s invisible.

Let’s look at an example:

As you can see, clicking a button either hides or shows the <Box> component. The <button> element stays in one place – because page flow stays the same.

Box component receives status prop, a boolean value that represents whether the component should be hidden.

To render a component on click in React, you need to conditionally style the main container in the child component. In this case, that is the <div> container in Box component.

Conditional styling requires double curly braces. One pair to embed JavaScript in JSX, and another to open and close the object.

Ternary operator evaluates boolean value received via props. If it’s true, the value of visibility property is visible. If not, it’s hidden.