¿Cómo cambiar los estados con el evento onClick en ReactJS usando componentes funcionales?

En las aplicaciones modernas, escribir componentes funcionales se ha convertido en la forma estándar de escribir componentes de React, ya que son simplemente funciones de JavaScript que aceptan accesorios y devuelven un elemento de React.

Uno puede usar Hooks solo en el componente funcional y esta es una forma mucho más fácil de administrar el estado en comparación con el componente de clase. Con Hooks, los objetos de estado son completamente independientes entre sí, por lo que puede tener tantos objetos de estado como desee. En una aplicación de una sola página, el enlace useState es la mejor manera de simplemente cambiar el estado con un clic sin recargar toda la página.

Gancho useState de reacción: el gancho useState toma el estado inicial como argumento y devuelve una variable con el valor del estado actual (no necesariamente el estado inicial) y otra función para actualizar este valor.

Ejemplo: Programa para demostrar el cambio de estado al hacer clic. En este ejemplo, tenemos dos botones de descripciones y reseñas y queremos cambiar el contenido cuando se hace clic en el botón.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app projectname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre del proyecto, muévase a ella con el siguiente comando.

cd projectname

Estructura del proyecto: Se verá así.

 

Paso 3: para usar useState, debe importar useState desde reaccionar como se muestra a continuación:

import { useState } from "react";
const [description, setDescription] = useState(true);
const [reviews, setReviews] = useState(false);

Establezca la función del controlador de eventos de clic del elemento en el que el clic da como resultado un cambio de estado. En el archivo ComponentOne.js escriba el siguiente código.

import { useState } from "react";
function ComponentOne() {
    const [description, setDescription] = useState(true);
    const [reviews, setReviews] = useState(false);
    const descriptionHandler = () => {
        setDescription(true);
        setReviews(false);
    };
    const reviewsHandler = () => {
        setDescription(false);
        setReviews(true);
    };
    return (
        <div>
            <button onClick={descriptionHandler}>
                Descriptions</button>
            <button onClick={reviewsHandler}>
                Reviews</button>
            {description && (
                <p>
                    This is a <b>descriptive</b> button
                    <h3>Descriptions:</h3>
                </p>
            )}
            {reviews && (
                <p>
                    This is a <b>Review</b> button
                    <h3>Reviews:</h3>
                </p>
            )}
        </div>
    );
}
  
export default ComponentOne;

Paso 4: en este código, cuando hacemos clic en un botón, el controlador de eventos React onClick le permite llamar a una función y desenstringr una acción, en nuestro caso, suponga que cuando se hace clic en el botón de revisión, llama a una función reviewsHandler, y dentro de esta función, el contenido /cambios de estado mediante el gancho useState.
 

import ComponentOne from "./components/ComponentOne";
  
function App() {
    return (
      <div>
       <ComponentOne/>
      </div>
    );
}
  
export default App;

Paso 5: escribe el siguiente código en el archivo  index.js .
 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(<App />,document.getElementById('root'));

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Salida: Ahora, abra la URL http://localhost:3000/, verá la siguiente salida.

 

Conclusión: en lugar de un componente de clase, el componente funcional es una forma simple y extensible de cambiar el estado al hacer clic en ReactJS sin recargar toda la página con el enlace useState.