Os desafios anteriores cobriram o state componente e como inicializar o estado no constructor . Há também uma maneira de alterar o state do componente. React fornece um método para atualizar o state componente chamado setState . Você chama o método setState dentro de sua classe de componentes da seguinte forma: this.setState() , passando um objeto com pares de valor-chave. As chaves são suas propriedades de estado e os valores são os dados de estado atualizados. Por exemplo, se estivéssemos armazenando um username no estado e queríamos atualizá-lo, ficaria assim:

this.setState ({
nome de usuário: 'Lewis'
});

React espera que você nunca modifique o state diretamente, em vez disso, sempre use this.setState() quando ocorrerem mudanças de estado. Além disso, você deve observar que o React pode agrupar várias atualizações de estado para melhorar o desempenho. O que isto significa é que as atualizações de estado através do método setState podem ser assíncronas. Há uma sintaxe alternativa para o método setState , que fornece uma maneira de contornar esse problema. Isso raramente é necessário, mas é bom manter isso em mente! Por favor, consulte a documentação do React para mais detalhes.

Existe um elemento de button no editor de código que possui um manipulador onClick() . Esse manipulador é acionado quando o button recebe um evento de clique no navegador e executa o método handleClick definido no MyComponent . No método handleClick , atualize o state do componente usando this.setState() . Defina a propriedade name no state para igualar a string React Rocks! . Clique no botão e veja a atualização do estado renderizado. Não se preocupe se você não entender completamente como o código do manipulador de cliques funciona neste momento. Está coberto nos próximos desafios.

```yml tests: - text: 'O estado de MyComponent deve ser inicializado com o par de valores de chave { 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 deve renderizar um cabeçalho h1 . testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "MyComponent should render an h1 header.");' - text: O cabeçalho h1 renderizado deve conter texto renderizado a partir do estado do 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: Chamar o método `handleClick` no `MyComponent` deve definir a propriedade name no 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}