Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics (retired) Stateful Components Updating State

What version of react is this "react basics" course based on?

what version of react is this?

3 Answers

Also, I wanted to note.

This is my code used to complete this section of the video, using React 16.4.1 incase anyone else is having trouble, they can reference this here. It's very much different than that's shown in the video.

Note: I'm using local dev environment not workspace.

<!-- React Script Files --->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
    <script type="text/babel" src="./app.jsx"></script>

NOTE I had to use the arrow function in order to get it to bind "this", it was throwing an error otherwise of setState()

// ******  Counter  ***** //

class Counter extends React.Component {
    static propTypes = {
        initialScore: PropTypes.number.isRequired,
    }

    constructor(props) {
        super(props);
        this.state = { score: this.props.initialScore }
    }

    incrementScore = () => {
        this.setState({
            score: (this.state.score + 1)
        });
    }

    decrementScore = () => {
        this.setState({
            score: (this.state.score - 1)
        });
    }

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

15.0.2

thanks.