Recap: State & Events

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

Challenge

Medium

Chapter recap. Build a desk lamp control panel: a counter and a toggle living side by side in one component.

Add two independent states: brightness starting at 0 and on starting at false.
Show the brightness in the span with id="level". The id="brighter" button adds 1 on every click.
The id="power" button flips on. When on, show a <p> with id="status" and the text Lamp is on; otherwise render null.

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>