La información sobre cómo se debe representar un componente debe fluir solo desde el estado; esto le permitirá llamar a setState para cambiar la forma en que se representa el componente. Poner una propiedad .style en la instancia del componente en sí no funcionará; en su lugar, póngala en el estado.

En lugar de duplicar el color en diferentes partes del estado, colóquelo en un solo lugar, en el objeto de style en el estado.

No estoy 100% seguro, pero probablemente también quieras

 this.setState({ count: this.state.count});

ser - estar

 this.setState({ count: this.state.count + 1 }); 

 class Practice extends React.Component { state = { count: 0, style: { color: 'blue', } } handleIncrement = () => { this.setState({ count: this.state.count + 1 }); this.setState({ style: { ...this.state.style, color: "green" }}); } render() { return( <div> <h1 style={this.state.style}> The color in this state is {this.state.style.color}. The number in count is {this.state.count}. <button onClick={this.handleIncrement} > Increment </button> </h1> </div> ); } } ReactDOM.render(<Practice />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Si bien otras respuestas explican bien por qué su código no funciona en términos de estado React, noté una cosa que podría ser otro punto de confusión.

Cuando está asignando un valor a su propiedad de style como este:

 style = { color: this.state.color }

podría estar pensando que está asignando style.color una "referencia" a la cadena a la que apunta this.state.color . Lo que realmente sucede es que está asignando el valor "blue" , porque la cadena es un tipo primitivo en JS. Entonces, después de hacer eso, su objeto de style es realmente solo

 { color: "blue" }

Entonces, incluso si de alguna manera cambia el valor de this.state.color , esto fundamentalmente no resultará en la actualización del valor de this.style.color .

state en la aplicación de reacción solo se actualizará usando setState si y solo si ha incluido el estado en this.state si está usando constructor o propiedad de state sin constructor .

Demo en vivo

Debes crear un estado como:

 state = { count: 0, style: { color: "blue" } };

y actualizar el estado como:

 handleIncrement = () => { this.setState((oldState) => { return { count: oldState.count + 1, style: { ...oldState.style, color: "green" } }; }); };