javascript Estado de los componentes en ReactJs

Posted 2021-05-03

Las propiedades (props) son inmutables, es decir; estas no pueden cambiar. En el caso que quisiéramos que algo cambie en nuestro componente, hay que manejarlo con el estado de nuestros componentes, el cual permite tener contenido dinámico.

Para inicializar el estado tenemos que hacer uso de nuestro metodo constructor:

constructor(props){
    super(props);
    this.state = {
        author: props.author
    }
}

Y en nuestros elementos vamos a utilizar state en lugar de props:

<p className="Media-author">{this.state.author}</p>

Para cambiar el estado tenemos un método especifico setSate() al cual le pasamos los valores que queremos modificar en nuestro estado.

handleClick = (event) => {
    this.setState({
        author: 'Emmanuel Alonso'
    })
}

Con ES7 podemos hacer definir el estado directamente, en lugar de usar el constructor:

state = {
    author: 'Ivan Robles'
}