Recap: Conditions & Lists

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

Challenge

Medium

Chapter recap: build a task board from the data, using everything from this chapter.

The component defines a tasks array. Inside the <ul id="done-list">, render one <li> per task that is done: filter first, then map.
Each <li> shows the task's text and uses its id as the key.
Above the list, use && to render a <span> with id="badge" reading 2 done (build the number from the filtered array's length!), but only when at least one task is done.

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>