Since Player component renders the counter component, how come the state was created in the player component.

Question

Answer 1 · 2019-09-09T18:57:39Z

September 9, 2019 6:57pm

If you follow through the video, a Counter component was created that manages its own state.

...
class Counter extends React.Component {
    constructor() {
        super();
        this.state = { score : 0 }
    }

    handleIncrememtScore = () => {
        this.setState(prevState => ({ score: prevState.score + 1 }))
    }

    handleDecrememtScore = () => {
        this.setState(prevState => ({ score: prevState.score - 1 }))
    }

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

const Player = ({playerName}) => {
    return (
        <div className="player">
            <span className="player-name">{playerName}</span>

            <Counter />
        </div>
    )
}

...

Welcome to the Treehouse Community

Looking to learn something new?

Uche Onuekwusi

Uche Onuekwusi

Since Player component renders the counter component, how come the state was created in the player component.

1 Answer

Kehinde Odewole

Kehinde Odewole