Los desafíos anteriores cubrían el state componente y cómo inicializar el estado en el constructor . También hay una manera de cambiar el state del componente. React proporciona un método para actualizar el state componente llamado setState . Llama al método setState dentro de su clase de componente así: this.setState() , pasando un objeto con pares clave-valor. Las claves son las propiedades de su estado y los valores son los datos de estado actualizados. Por ejemplo, si almacenáramos un username de username en estado y quisiéramos actualizarlo, se vería así:

this.setState ({
nombre de usuario: 'Lewis'
});

React espera que nunca modifique el state directamente, en su lugar, siempre use this.setState() cuando ocurran cambios de estado. Además, debe tener en cuenta que React puede generar varias actualizaciones de estado por lotes para mejorar el rendimiento. Lo que esto significa es que las actualizaciones de estado a través del método setState pueden ser asíncronas. Hay una sintaxis alternativa para el método setState que proporciona una forma de solucionar este problema. Esto rara vez es necesario, pero es bueno tenerlo en cuenta. Por favor, consulte la documentación de React para más detalles.

Hay un elemento de button en el editor de código que tiene un controlador onClick() . Este controlador se activa cuando el button recibe un evento de clic en el navegador y ejecuta el método handleClick definido en MyComponent . Dentro del método handleClick , actualice el state del componente usando this.setState() . Establezca la propiedad de name en state para que sea igual a la cadena React Rocks! . Haga clic en el botón y observe la actualización del estado renderizado. No se preocupe si no entiende completamente cómo funciona el código del controlador de clics en este momento. Está cubierto en los próximos desafíos.

```yml tests: - text: 'El estado de MyComponent debe MyComponent con el par de valores clave { name: Initial State } .' testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of MyComponent should initialize with the key value pair { name: Initial State }.");' - text: MyComponent debe hacer un encabezado h1 . testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "MyComponent should render an h1 header.");' - text: El encabezado h1 representado debe contener texto representado desde el estado del componente. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/

TestName<\/h1>/.test(firstValue), "The rendered `h1` header should contain text rendered from the component's state."); };' - text: ¡Llamar al método `handleClick` en `MyComponent` debe establecer la propiedad de nombre en el estado para igualar `React Rocks!` . testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "Before" }); return waitForIt(() => mockedComponent.state("name")); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state("name")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "Before" && secondValue === "React Rocks!", "Calling the `handleClick` method on `MyComponent` should set the name property in state to equal `React Rocks!`."); };' ```

{this.state.name}