Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

For those using React 16.4.1, code to get section of video to work.

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>
        );
    }
};