State en React

Ya has visto como configurar componentes con props en React, pero ¿cómo puedes definir comportamientos o interacciones con dichos componentes? Para ello necesitas que los componentes puedan definir su estado, y con las props es imposible, pues no pueden ser modificadas por el componente, sólo por su componente padre. Para esto existe this.state, donde los componentes pueden disponer de datos privados modificables a traves de la función this.setState().

Ya sabes que función usar para ajustar this.state, pero ¿Cómo podrías definir un estado inicial del componente? Bien, pues para eso disponemos del constructor de clase. En la función render comprobamos el estado del componente para decidir como va a ser mostrado, y ahora viene la magia: cuando modificamos el estado de un componente, automáticamente se volverán a renderizar todos sus componentes hijos y el propio componente. Esto, además, es bastante ágil gracias al DOM virtual de React.

class Dashboard extends Component {
  constructor() {
    super(...arguments);
    this.state = {
        showAdvancedFeatures: false
    }
  }

  render(){
    let advancedFeatures;
    if(this.state.showAdvancedFeatures){
      advancedFeatures = (
        <AvancedFetaures/>
      )
    }
    return (
      <div className="dashboard">
        <BasicFeatures/>
        {advancedFeatures}
      </div>
    );
  }
}