Count in Steps

Part of the Fundamentals section of Coddy's React journey — lesson 24 of 42.

The setter takes any new value: you're not limited to +1. Add 5, double it, reset to zero:

setPoints(points + 5);
setPoints(points * 2);
setPoints(0);

Buttons for different amounts are just different handlers on the same state:

<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>

Challenge

Easy

A game gives 5 points per coin.

Add points state starting at 0 and show it in the span with id="points".
The Collect coin button (id="coin") adds 5 per click.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Fundamentals

1Meet React

What Is React?Your First Component One Parent Rule JSX Is Not HTML Recap: Meet React

4Props

What Are Props?Passing Props Two Props Same Component, New Data The Children Prop Recap: Props

7Conditions & Lists

Ternary Rendering Show with &&Render a List Keys Matter Filter, Then Map Recap: Conditions & Lists

2JSX Expressions

Curly Braces Math in Braces Braces in Attributes Calling Functions in JSX Recap: JSX Expressions

5State & Events

What Is State?Click CounterCount in StepsToggle with State Independent State Recap: State & Events

8Project: Profile Card

Step 1: Card Structure Step 2: Card with Props Step 3: Like Button Step 4: Follow Toggle

3Components

Building Blocks Your Second Component Reuse Components Compose a Page Recap: Components

6Forms & Inputs

Controlled Inputs Echo the Input Character Counter Clear Button Recap: Forms & Inputs