Scribd
Upload
3 views

Advanced React

This document explains how to render lists in React using the map method in JavaScript. It provides examples of transforming a list of dessert data into a simpler format for display, focusing on properties like title and price. The document includes code snippets demonstrating the process of mapping data to JSX elements for rendering in a React component.

Uploaded by

naveenapriya13
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Advanced React

This document explains how to render lists in React using the map method in JavaScript. It provides examples of transforming a list of dessert data into a simpler format for display, focusing on properties like title and price. The document includes code snippets demonstrating the process of mapping data to JSX elements for rendering in a React component.

Uploaded by

naveenapriya13
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

RENDERING LISTS IN REACT

1.TRANSFORMING LISTS IN JS:


In this , you'll learn how to use the map method in JavaScript to transform lists of data. EXAMPLE:
Let's imagine that a restaurant called Little Lemon would like to display a list of its popular desserts.
Remember that a list is a simple collection of elements which, translated to JavaScript terms, represents
an array.

Code: Output:
const data = [
{ Examine the console output
id: "1",
title: "Tiramisu", Changes:
description: "The best tiramisu in town",
image: "https://picsum.photos/200/300/? const topDesserts = data.map(dessert => {
random", return {
price: "$5.00", content: `${dessert.title} - ${dessert.description},
}, price: dessert.price,
{ }
id: "2", })
title: "Lemon Ice Cream",
description: "Mind blowing taste", export default function App() {
image:
"https://picsum.photos/200/300/7random", console.log(topDesserts)
price: "$4.50", return <h1>Examine the console output</h1>;
}, }
{
id: "3",
title: "Chocolate mousse",
description: "Unexplored flavour",
image: "https://picsum.photos/200/300/?
random",
price: "$6.00",
},
export default function App() {
return <h1>Examine the console output</h1>;
}

2. Render a simple list component:


In this , you will learn how to display a collection of elements like this with React by using the map function
in JSX syntax.

Example: I will use the list of little lemons best desserts again, each one having the following properties,
ID, title, image, description, and price.

The aim is to display a simpler version of this collection of top desserts by displaying just the title and the
price.

const data = [ The first step is to create a new variable


{ called list items to store the result of the
id: "1", transformation I'm going to perform.
title: "Tiramisu",
description: "The best tiramisu in town", Anonymous function:
image: "https://picsum.photos/200/300/?
Const listItems=topdesserts.map(dessert=>{})
random",
price: "$5.00", Named function:
},
{ const listItems = data.map
id: "2",
title: "Lemon Ice Cream", (function createListItem (dessert) {});
description: "Mind blowing taste",
For that, I'm going to loop through the array of
image:
deserts using the JavaScript math function. You
"https://picsum.photos/200/300/7random",
price: "$4.50", may be wondering what it should return inside the
}, map function. Traditionally in JavaScript, you
{ would return any datatype. When you are working
id: "3", with lists in JSX, you can also return a React
title: "Chocolate mousse", component as the transformation applied to each
description: "Unexplored flavour", element.
image: "https://picsum.photos/200/300/?
random", Second step
price: "$6.00", I'm first going to create a new variable for the text
}, named item text. I will use a dash to separate title
and price, as well as the dot notation to access
function App() { the needed properties from the desert object,
which are title and price.
const listItems = data.map(dessert=>{
const itemText = $(dessert.title)-$(dessert.price)
The last step is to go to the render method and
return <li key={dessert.id}>{itemText}</li> embed
list items into the HTML list wrapper component,
}) unordered list or UL and that's it. The deserts are
return ( displayed in a simple and concise way.
<div>
<ul>
{listItems}
</ul>
</div>
);
}
export default App;

You might also like