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 React Basics (retired) Stateful Components Updating State

Posted by silva celso
silva celso
13,513 Points

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

what version of react is this?

3 Answers

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

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>
        );
    }
};
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

15.0.2

silva celso
silva celso
13,513 Points
silva celso
silva celso
13,513 Points

thanks.