1. Declara un constructor e inicializa tu estado,
2. Use una función de flecha en su método likes_count()
3. Usa this.setState({likes: this.state.likes +1}); en lugar de this.state({likes: this.state.likes +1});

 import React, {useState} from 'react'; class GiveLikes extends React.Component { constructor(props) { super(props); this.state = {likes: 0}; } likes_count = () => { this.setState({likes: this.state.likes +1}); } render() { return ( <> <h2> {this.state.likes} </h2> <div className="buttons"> <button style={{ fontSize: '60%', position: 'relative', top: '20vh', marginRight: '5px', backgroundColor: 'green', borderRadius: '8%', color: 'white', }} onClick={this.likes_count}>Likes </button> </div> </> ) } } export default GiveLikes;

Agregue un constructor e inicialice this.state , de lo contrario, no existirá.

Lo que sucede es que cada vez que vuelve a renderizar su componente (por cambio de estado o accesorios), volverá a crear su state una y otra vez con {likes: 0} y no funcionará.

Además, está mezclando el componente de clase y el estilo de sintaxis del componente funcional, lo que generará más errores y problemas con React y su código.

Además, debe colocar una función que se llamará onClick pero creó una función que devuelve una función, y es incorrecta en su caso.

Otro problema es configurar el estado de sus Me gusta usando this.setState y no solo llamando al estado como una función.

 import React from 'react'; class GiveLikes extends React.Component { constructor(props) { super(props); this.state = {likes: 0}; } likes_count = () => { this.setState ({likes: this.state.likes +1}); } render() { return ( <> <h2> {this.state.likes} </h2> <div className="buttons"> <button style={{ fontSize: '60%', position: 'relative', top: '20vh', marginRight: '5px', backgroundColor: 'green', borderRadius: '8%', color: 'white', }} onClick={this.likes_count}>Likes </button> </div> </> ) } } export default GiveLikes;

Lea acerca de reaccionar.

Concéntrese en su primer componente (busque ejemplos con componentes de contadores en línea).

No se apresure en las cosas sin entender completamente. Reaccionar es divertido.

Editar:

El resumen de esta respuesta es que el estado no existe porque no hay un constructor para this.state

Creo que la respuesta es que los accesorios nunca deben actualizarse. Debemos usarlos tal cual. ¿Suena rígido verdad? Pero React tiene sus razones detrás de esta regla y estoy bastante convencido por su razonamiento. Sin embargo, la única advertencia es que hay situaciones en las que podríamos necesitar iniciar la actualización de un accesorio. Y pronto sabremos cómo.

Considere la siguiente línea de código de un componente principal:

 <MyChild childName={this.state.parentName} />

Ahora, si se requiere algún cambio de nombre, parentName se cambiará en el padre y ese cambio se comunicará automáticamente al hijo como es el caso con el mecanismo React. Esta configuración funciona en la mayoría de los escenarios.

Pero, ¿qué sucede si necesita actualizar la propiedad del componente secundario y el conocimiento del cambio requerido y el disparador para cambiarlo solo lo conoce el elemento secundario? Teniendo en cuenta las formas de React, los datos solo pueden fluir de arriba a abajo, es decir, de padre a hijo. Entonces, ¿cómo vamos a comunicarle a los padres que se requiere un cambio en la propiedad?

Responda de la siguiente fuente: https://www.freecodecamp.org/news/how-to-update-a-components-prop-in-react-js-oh-yes-it-s-possible-f9d26f1c4c6d/

Solo he mostrado las partes que necesitas para leer nada más. Analice su código correctamente la próxima vez, esto no es algo difícil de hacer.