Reactjs : Update value of a component on click

Edit:

The summary of this answer is that the state does not exist because there is no constructor for this.state

I believe the answer to be is Props are never to be updated. We are to use them as is. Sounds rigid right? But React has its reasons behind this rule and I’m pretty convinced by their reasoning. The only caveat is, though, that there are situations where we might need to initiate the update of a prop. And we will soon know how.

Consider the following line of code from a parent component:

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

Now if there is any change of name required, parentName will be changed in the parent and that change will automatically be communicated to the child as is the case with the React mechanism. This setup works in most of the scenarios.

But what if you need to update the prop of the child component, and the knowledge of the change required and the trigger to change it is only known to the child? Considering the ways of React, data can only flow from top-to-bottom i.e., from parent-to-child. So then how are we to communicate to the parent that a change to prop is required?

Answer from the following source: https://www.freecodecamp.org/news/how-to-update-a-components-prop-in-react-js-oh-yes-it-s-possible-f9d26f1c4c6d/

I've only shown the parts you need to read nothing else. Please analyse your code properly next time, this isn't a hard thing to do .

You forgot to call the function -

onClick={() => this.likes_count()}

Also, Instead of passing likes you need to use the data from state and then update it like -

    likes_count = () => {
    let likes = this.state.likes;
    this.setState({ likes: likes + 1 });
    };

Add a constructor and initialize this.state otherwise it won't be exists.

What happens is every time you re-render your component (by state or props change) you will re-create the your state again and again with {likes: 0} and it will not work.

Also, you are mixing class component and functional component syntax style, which will lead to more bugs and issues with react and your code.

Moreover, you need to put a function that will be called in onClick but you created a function that returns a function, and it is wrong in your case.

Another issue is to set your likes state using this.setState and not just calling state as a function.

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;

Read about react.

Focus on your first component (look for examples with counters components online).

Don't rush into things without fully understand. React is fun.