JavaScript React Basics (retired) Stateful Components Updating State

silva celso
silva celso
12,553 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

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