Actualizar propiedades de estado anidado en React

1. la función setState() en React
2. Actualizar propiedades de estado anidado en React
3. Conclusión

Cuando intentamos actualizar el estado inicial de un componente en React, significa que queremos que ese estado inicial cambie en respuesta a una acción del usuario o un evento del sistema.

Cuando se cambia o actualiza el estado inicial, la información que se muestra en el navegador también cambia. Esto se debe a que React renderiza el componente nuevamente con el código actualizado.

La función setState() es la función principal de React que puede actualizar el estado anidado de un componente.

la función setState() en React

Después de haber establecido el estado inicial de un componente, React setState() es la función llamada para inicializar un nuevo estado. Debido a que necesitamos que el usuario active un evento, aplicaremos la función onClick junto con setState() para escuchar la acción realizada por el usuario y luego generar el componente de estado actualizado.

Actualizar propiedades de estado anidado en React

Ahora veremos varios ejemplos que demuestran cómo actualizar el estado inicial de un componente anidado.

Actualizar un solo atributo

En este ejemplo, usaremos el método setState() para actualizar el componente de estado inicial y actualizaremos una sola entrada que existe en la matriz:

Fragmento de código (App.js):

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {greeting :
        'Click the button to receive greetings'}

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({greeting :
        'Welcome!!!'})
}
render(){
    return (
    <div>
        <h2>Greetings Portal</h2>
        <p>{this.state.greeting}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Producción:

Después de establecer el estado inicial del componente, primero debemos vincular la palabra clave greeting a la función updateState para que React sepa qué palabra clave buscar en los componentes y cambiar.

Luego usamos la función setState para codificar qué datos queremos que devuelva la palabra clave greeting.

Por último, usamos el detector de eventos onClick con la función updateState, de modo que cuando el usuario presiona Click me! botón, la información en el navegador se cambia y se actualiza.

Actualizar múltiples atributos

Este ejemplo es mucho más similar al ejemplo anterior. Pero aquí estamos tratando con múltiples entradas en el estado del componente.

Fragmento de código (App.js):

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {
    test: "Nil",
    questions: "0",
    students: "0"
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({
        test: 'Programming Quiz',
        questions: '10',
        students: '30'
    })
}
render(){
    return (
    <div>
        <h2>Test Portal</h2>
        <p>{this.state.test}</p>

        <p>{this.state.questions}</p>

        <p>{this.state.students}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
)
}
}
export default App;

Producción:

Después de configurar el primer estado, vinculamos la palabra clave this.state. Luego de eso, procedemos a actualizar los estados de los elementos en el arreglo.

Debido a que estamos tratando con varios elementos, colocamos cada elemento en un elemento de párrafo para mostrarlo como una lista cuando se representa en la página web.

Actualizar estado usando accesorios

En este ejemplo, estamos usando accesorios para actualizar el estado inicial. Props es una palabra corta para propiedades.

Este método es ideal para manejar tareas que incluyen varios elementos en la matriz y formas complejas de datos, y ayudará a actualizar el estado fácilmente.

Como en los ejemplos anteriores, estamos haciendo la codificación en App.js.

Fragmento de código (App.js):

import React, { Component } from 'react'
class App extends Component {
static defaultProps = {
    testTopics : [
        'React JS', 'Node JS', 'Compound components',
        'Lifecycle Methods', 'Event Handlers',
        'Router', 'React Hooks', 'Redux',
        'Context'
    ]
}

constructor(props){
    super(props)

    // Set initial state
    this.state = {
    testName: "React js Test",
    topics: ''
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
listOfTopics(){
    return (
    <ul>
        {this.props.testTopics.map(topic => (
            <li>{topic}</li>
        ))}
    </ul>
    )
}

updateState(){
    // Changing state
    this.setState({
    testName: 'Test topics are:',
    topics: this.listOfTopics()
    })
}
render(){
    return (
    <div>
        <h2>Test Information</h2>
        <p>{this.state.testName}</p>
        <p>{this.state.topics}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Producción:

Comenzamos pasando los datos múltiples en nuestra matriz testTopics. Luego establecemos el estado inicial de nuestros datos en la matriz testName.

Después de vincular la palabra clave testName a updateState, creamos una función listOfTopics que devolverá los elementos de la matriz testTopics como una lista con un estado de topic.

Luego usamos la función setState() junto con el detector de eventos onClick, de modo que cuando Click me! se presiona el botón, la lista de elementos se mostrará en lugar del estado inicial, React js Test.

Actualizar estado con su valor anterior

Este es un ejemplo numérico donde queremos que el valor inicial aumente. En este caso, queremos que el estado inicial aumente en lugar de cambiar.

Como queremos que aumente el estado inicial, pasaremos el prevState como parámetro dentro de la función useState(), y useState() se utilizará en una función de flecha.

Fragmento de código (App.js):

import React, { Component } from 'react'

class App extends Component {

    constructor(props){
        super(props)

        // Set initial state
        this.state = {
            count: 0
        }

        // Binding this keyword
        this.updateState = this.updateState.bind(this)
    }

    updateState(){
        // Changing state
        this.setState((prevState) => {
            return { count: prevState.count + 1}
        })
    }

    render(){
        return (
            <div>
                <h2>Click Counter</h2>
                <p>You have clicked me {this.state.count} times.</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        )
    }
}

export default App;

Producción:

Llamamos a prevState dentro de la función setState para que cuando se haga clic en el botón, reconozca el último estado en el que se encontraban los datos y aumente ese estado en 1, como hemos configurado en la matriz return para aumentar la cuenta en 1.

Conclusión

Hay varios usos para actualizar el estado de un componente en React. Pero, con los ejemplos que hemos discutido, un codificador debería poder aplicar los diferentes casos de uso en cualquier situación.