React: Cómo mostrar un componente diferente al hacer clic

Alternar la visibilidad de los componentes diciéndole a React que muestre otro componente cuando haga clic en algo

En muchos escenarios, es posible que desee mostrar un componente completamente diferente dentro de una pantalla cuando se hace clic en un botón o enlace.

Piense en una estructura de navegación, por ejemplo.

¿Cómo puedes hacerlo?

En este ejemplo estoy administrando el estado centralizado en el componente App.

import React from 'react'const AddTripButton = (props) = {  return button onClick={props.addTrip}Add a trip/button}export default AddTripButton

Luego, en el componente App, maneja el evento addTrip asignándole el triggerAddTripStatemétodo:

AddTripButton addTrip={this.triggerAddTripState} /

Con los ganchos de React, primero importa useState:

import { useState } from 'react'

Luego declara una variable de “estado”:

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

En JSX se muestran y ocultan diferentes componentes en función de este valor de estado:

function App() {  const [state, setState] = useState('start')  return (    div      {state === 'start'  (        AddTripButton addTrip={() = setState('add-trip') } /      )}      {state === 'add-trip'  AnotherComponent /}    /div  )}

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase