let x=>.map()<div>color: teal____________

Explorer···

▼THEEBUG

index.tsx learn.md docs.md about.md faq.md leaderboard.md updates.md

THEEBUG›learn.md

Browse more courses

React

Components, props, state, and the hooks that power modern React apps.

Beginner

3 levels

01 — lesson1.jsx

easyJSX & Components

1function Greeting() {

2 return <h1>Hello, [ ___ ]!</h1>;

Complete the JSX so the component renders "Hello, world!"

02 — lesson2.jsx

1function Welcome([ ___ ]) {

2 return <p>Hello, {name}!</p>;

5<Welcome name="Ada" />

Destructure the name prop so the component greets whoever it's passed

03 — lesson3.jsx

easyState with useState

1import { useState } from "react";

3function Counter() {

4 const [count, setCount] = [ ___ ](0);

5 return <p>Count: {count}</p>;

Call useState so the counter has somewhere to keep its count

Intermediate

2 levels

04 — lesson4.jsx

mediumEvent Handling

1function Counter() {

2 const [count, setCount] = useState(0);

4 <button [ ___ ]={() => setCount(count + 1)}>

5 Clicked {count} times

Wire up the button so clicking it increases the count

05 — lesson5.jsx

mediumConditional Rendering

1function Status({ isOnline }) {

2 return <p>{isOnline [ ___ ] "Online" : "Offline"}</p>;

Complete the ternary so the status text matches whether the user is onli…

Advanced

1 level

06 — lesson6.jsx

hardRendering Lists & Keys

1function FruitList({ fruits }) {

4 {fruits.map((fruit) => (

5 <li [ ___ ]={fruit}>{fruit}</li>

Add the key prop React needs to track each item in the rendered list

mainUTF-8

Markdown