Skip to content

React: How to show a different component on click

The Valley of Code

Your Web Development Manual

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>
  )
}
β†’ Get my React Beginner's Handbook
β†’ Read my full React Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)