¿Cómo establecer el estado con un nombre de clave dinámica en ReactJS?

React.js introduce el concepto de estado. Los estados se utilizan para almacenar datos para componentes específicos. Estos estados se pueden actualizar en consecuencia usando la función setState. La actualización del estado conduce a la reproducción de la interfaz de usuario. Puede asignar nombres significativos a los estados. Puede haber un requisito para crear un estado con un nombre de clave dinámica. Podemos hacer esto en React. 

Vamos a crear un proyecto React y luego crearemos un estado con un nombre de clave dinámica. 

Creando proyecto React:

Paso 1: cree una aplicación de reacción escribiendo el siguiente comando en la terminal.

npx create-react-app project_name

Paso 2 : Ahora, vaya a la carpeta del proyecto, es decir, project_name ejecutando el siguiente comando.

cd project_name

Estructura del proyecto: Tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo: Vamos a crear un campo de entrada que tome el nombre del estado como entrada y el valor del estado como otra entrada. Ahora se agrega un botón que tiene una función onclick. Crea el estado con un nombre de clave dinámica que incluye un valor dentro de este ‘[ ]’ con un clic del usuario. Los usuarios pueden hacer clic en el botón para crear un nuevo estado y mostrará el estado recién creado en la interfaz de usuario. 

Nombre de archivo: App.js

import React, { Component } from "react";
  
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      value: " ",
    };
  }
  
  render() {
    return (
      <div>
        <p>Enter State Name:</p>
        <input
          onChange={(e) => {
            this.setState({ name: e.target.value });
          }}
          type="text"
        ></input>
        <p>Enter State Value:</p>
        <input
          onChange={(e) => {
            this.setState({ value: e.target.value });
          }}
          type="text"
        ></input>
        <br />
        <br />
        <button
          onClick={() => {
            this.setState({
              [this.state.name]: this.state.value,
            });
          }}
        >
          Create a dynamic state
        </button>
        {this.state[this.state.name] ? (
          <p>
            {this.state.name}:{this.state[this.state.name]}
          </p>
        ) : null}
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Abra su navegador. De manera predeterminada, abrirá una pestaña con localhost ejecutándose y podrá ver el resultado que se muestra en la imagen. Complete los datos requeridos y haga clic en el botón. Como puede ver en la salida, se crea un nuevo estado con un nombre dinámico con el valor que ingresó. La interfaz de usuario verifica si el estado existe y luego muestra el valor.