React: How to show a different component on click
Toggle the visibility of components by telling React to display another component when you click something
In many scenarios you want to display a completely different component inside a screen, when a button or link is clicked.
Think about a navigation structure, for example.
How can you do so?
In this example I’m managing the state centralized in the App component.
import React from 'react'
const AddTripButton = (props) => {
return <button onClick={props.addTrip}>Add a trip</button>
}
export default AddTripButton
Then in the App component, handle the addTrip event by assigning it the triggerAddTripState
method:
<AddTripButton addTrip={this.triggerAddTripState} />
With React hooks, first import useState:
import { useState } from 'react'
then declare a “state” variable:
const [state, setState] = useState('start')
In the JSX you show and hide different components based on this state value:
function App() {
const [state, setState] = useState('start')
return (
<div>
{state === 'start' && (
<AddTripButton addTrip={() => setState('add-trip') } />
)}
{state === 'add-trip' && <AnotherComponent />}
</div>
)
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025