¿Cómo actualizar el estado de un componente en ReactJS?

El Estado es una instancia de React Component que se puede definir como un objeto de un conjunto de propiedades observables que controlan el comportamiento del componente. En otras palabras, el estado de un componente es un objeto que contiene cierta información que puede cambiar durante la vida útil del componente. El estado de un componente se puede actualizar durante su vida útil.

Generalmente, hay dos tipos de componentes en React. Los componentes basados ​​en clases y los componentes funcionales . El método por el cual podemos actualizar el Estado de un componente es diferente en estos dos tipos de componentes. Vamos a aprenderlos uno por uno.

Creando una aplicación de reacción:

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

npx create-react-app name_of_the_app

Paso 2: después de crear la aplicación de reacción, muévase al directorio según el nombre de su aplicación usando el siguiente comando:

cd name_of_the_app

Estructura del proyecto: ahora abra la carpeta de su aplicación en un editor. Verá la siguiente estructura de archivos:

1. Actualizar el estado de los componentes basados ​​en clases: ahora vamos a aprender cómo actualizar el estado de un componente basado en clases. Los pasos se discuten a continuación.

• Vaya al archivo App.js y borre todo.
• En la parte superior del archivo App.js, importe React,{Component} from ‘react ‘ .
• Cree un componente basado en Clase llamado ‘Aplicación’. Este es el componente de aplicación predeterminado que hemos reconstruido.
• Cree un objeto de estado llamado texto, usando this.statesyntax. Dale un valor.
• Cree otro método dentro de la clase y actualice el estado del componente usando el método ‘this.setState()’.
• Pase el objeto de estado en un elemento JSX y llame al método para actualizar el estado en un evento específico como hacer clic en un botón.

Ejemplo :

Nombre de archivo: App.js

// The App.js file
import React,{Component} from 'react';
 
class App extends Component {
  constructor(){
    super()
    this.state={
      text : 'Welcome to Geeksforgeeks'
    }
  }
 
  goPremium(){
    this.setState({
      text:'Subscription successful'
    })
  }
  render() {
      return (
          <div>
            <h1>{this.state.text}</h1>
            <button onClick={() => this.goPremium()}>
              Go Premium
            </button>
          </div>
      ); 
  }
}
 
export default App;

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

npm start

Producción:

2. Actualizar el estado de los componentes funcionales: A continuación se detallan los pasos para actualizar el estado de un componente funcional.

• Borre todo dentro del componente de la aplicación del archivo App.js.
• En la parte superior del archivo App.js, importa React, {useState} de “react” .
• Dentro del componente de la aplicación, cree un estado llamado ‘texto’ usando la siguiente sintaxis. Este es el método useState incorporado para reaccionar componentes funcionales. :

const [state, setState] = useState({text:'Default value of the text state'});

• Pase el estado ‘texto’ al elemento JSX usando el método ‘{state.text}’.
• Actualice el estado en un evento específico como hacer clic en un botón usando el método ‘setState’. La sintaxis se da a continuación:

setState({text:'Updated Content'})

Ejemplo:

Nombre de archivo: App.js

// App.js file
import React, {useState} from "react";
  
function App(){
    const [state, setState] = useState({
      text:'Welcome to Geeksforgeeks'
    });
    return (
        <div>
            <h1>{state.text}</h1>
            <button onClick={() => setState({
              text:'Subscription successful'
              })}>
             Go Premium
            </button>
        </div>
    );
};
 
export default App;

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

npm start

Producción: