Rendering elements in React - Mini Project: Build & Apply

Rendering Elements in React

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Rendering lists of data is common in web apps, such as showing products, messages, or user profiles.

💼 Career

Understanding how to render elements dynamically is a core skill for React developers building interactive user interfaces.

1

Create the fruit array

Create a variable called fruits and assign it an array with these exact strings: "Apple", "Banana", "Cherry".

React

// Your code here

Need a hint?

Use square brackets [] to create an array and separate items with commas.

2

Add a title variable

Create a variable called title and assign it the string "My Favorite Fruits".

React

const fruits = ["Apple", "Banana", "Cherry"]
// Your code here

Need a hint?

Use double quotes "" to create a string.

3

Create the list items using map

Create a variable called fruitListItems and set it to the result of calling fruits.map. Inside the map, use an arrow function with parameter fruit that returns a <li> element containing the fruit.

React

const fruits = ["Apple", "Banana", "Cherry"]
const title = "My Favorite Fruits"
// Your code here

Need a hint?

Use map to transform each fruit into a list item element.

4

Render the title and list in a React component

Create a React functional component called FruitList that returns a <div> containing an <h1> with the title and an unordered list <ul> with the fruitListItems.

React

const fruits = ["Apple", "Banana", "Cherry"]
const title = "My Favorite Fruits"
const fruitListItems = fruits.map(fruit => {fruit})

// Your code here

Need a hint?

Use parentheses () to return multiple JSX elements inside the component.