Реагировать: Как отобразить другой компонент при нажатии

Во многих сценариях вы хотите отображать совершенно другой компонент внутри экрана при нажатии кнопки или ссылки.

Подумайте, например, о структуре навигации.

Как вы можете это сделать?

В этом примере я управляю централизованным состоянием в компоненте приложения.

import React from 'react'

const AddTripButton = (props) => {
  return Add a trip
}

export default AddTripButton

Затем в компоненте приложения обработайте событие добавления поездки, назначив ему триггер Добавить состояние поездки метод:

С помощью крючков React сначала импортируйте состояние пользователя:

import { useState } from 'react'

затем объявите переменную “состояние”:

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

В JSX вы показываете и скрываете различные компоненты на основе этого значения состояния:

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

  return (
    

      {state === 'start' && (
         setState('add-trip') } />
      )}

      {state === 'add-trip' && }
    
  )
}

Оригинал: “https://flaviocopes.com/react-show-different-component-on-click/”