React state vs props comparison

react-state-props.js

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter : 0
        };
        
        this.onButtonClick = this.onButtonClick.bind(this);
    }
    
    onButtonClick() {
        const newCounter = this.state.counter + 1;
        this.setState({counter : newCounter});
    }
    
    render() {
        return (
            <div>Parent prop: {this.props.text}</div>
            <div>Counter state: {this.state.counter}</div>
            <button onClick={this.onButtonClick}>Increment Counter</button>
        )
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text : "Hi there!"
        };
    }
    
    render() {
        return (
            <ChildComponent text={this.state.text} />
        )
    }
}