¿Cuál es el uso de la función setElement en ReactJS?

En ReactJS tenemos un gancho useState , este gancho se usa para declarar una variable de estado dentro de una función. Cabe señalar que un uso de useState() solo se puede usar para declarar una variable de estado.

Acercarse:

• Cree una aplicación React para configurar el entorno de desarrollo.
• Declara un gancho useState.
• Establece el valor del elemento usando la función setElement.

Nota: Consulte el artículo Configuración de ReactJS para configurar el entorno de desarrollo.

Configuración del entorno de desarrollo:

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

npx create-react-app foldername

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

cd foldername

Nota: en esa carpeta creada, vaya a la carpeta src y elimine App.test.js, logo.svg y setupTests.js porque estos archivos no son necesarios en este proyecto y el nombre de nuestra carpeta es state . 

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Sintaxis:

Este useState Hook se declara de la siguiente manera:

const [ element , setElement ] = useState(initial_state);

El valor devuelto por useState() consiste en una array con dos valores. El primer valor se conoce como la variable de estado y el segundo se conoce como una función para cambiar el estado de la variable de estado, esta función se denomina setElement .

Esta función setElement se usa para cambiar el estado o valor de la primera variable.

Ejemplo: Cambiar el estado del elemento usando la función setElement.

En App.js, escriba el código que se indica a continuación.

import React, { useState } from 'react'
function App() {
  const [element, setElement] = useState(0);
  
  function onClickButtonHandler() {
    setElement(element+1);
  }
  return (
    <div style={{textAlign:"center"}}>
      <h1>GeeksforGeeks</h1>
        
<p>Add = {element}</p>
  
      <button onClick={onClickButtonHandler}>
        ADD
      </button>
    </div>
  )
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

Nota: Consulte los artículos de React Hook para una mejor comprensión.