# React: How to show a different component on click

> Learn how to show a different React component when a button is clicked by storing a value in useState and conditionally rendering based on that state.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-11-05 | Updated: 2021-09-13 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-show-different-component-on-click/

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.

```js
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:

```js
<AddTripButton addTrip={this.triggerAddTripState} />
```

With [React](https://flaviocopes.com/react/) hooks, first import useState:

```js
import { useState } from 'react'
```

then declare a "state" variable:

```js
const [state, setState] = useState('start')
```

In the JSX you show and hide different components based on this state value:

```js
function App() {
  const [state, setState] = useState('start')

  return (
    <div>
      {state === 'start' && (
        <AddTripButton addTrip={() => setState('add-trip') } />
      )}

      {state === 'add-trip' && <AnotherComponent />}
    </div>
  )
}
```