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 centrally 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 passing the triggerAddTripState method to it:

<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>
  )
}

Lessons in this unit:

0:	Introduction
1:	React, focus an item in React when added to the DOM
2:	React, edit text on double-click
3:	▶︎ React: How to show a different component on click
4:	Change the Heroicons SVG stroke width in React