JavaScript React Components Managing State and Data Flow Communicating Between Components

Gremyko Coleman
Gremyko Coleman
6,817 Points

Why doesn't this work if we leave <Counter> as a class instead of turning it back making it class less?

Do we have to turn the Counter component back into being classless within the Counter Module? Is there a way to make the button on click work with leaving the Counter component with a class instead? When I tried it as coding it below, I get an error message saying "

The <Counter> component as a class the onClick event doesn't work and I get an error message saying "changeScore is not a function"? But, when I make the Counter component class less it works?

import React from "react";

class Counter extends React.Component{

       render(){
        return(
            <div className="counter">
                <button className="counter-action decrement" onClick={() => this.changeScore(-1)}> - </button>
                <span className="counter-score">{this.state.score}</span>
                <button className="counter-action increment" onClick={()=> this.changeScore(+1)}> + </button>
            </div>
            );
}

}

export default Counter;

but making it class less below the onClick event works fine?

import React from "react";

const Counter = (props)=>{


        return(
            <div className="counter">
                <button className="counter-action decrement" onClick={() => props.changeScore(-1)}> - </button>
                <span className="counter-score">{props.score}</span>
                <button className="counter-action increment" onClick={()=> props.changeScore(+1)}> + </button>
            </div>
            );

}

export default Counter;