RENDERING LISTS IN REACT
[Link] 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: "[Link] const topDesserts = [Link](dessert => {
random", return {
price: "$5.00", content: `${[Link]} - ${[Link]},
}, price: [Link],
{ }
id: "2", })
title: "Lemon Ice Cream",
description: "Mind blowing taste", export default function App() {
image:
"[Link] [Link](topDesserts)
price: "$4.50", return <h1>Examine the console output</h1>;
}, }
{
id: "3",
title: "Chocolate mousse",
description: "Unexplored flavour",
image: "[Link]
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: "[Link]
Const listItems=[Link](dessert=>{})
random",
price: "$5.00", Named function:
},
{ const listItems = [Link]
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
"[Link]
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: "[Link]
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 = [Link](dessert=>{
const itemText = $([Link])-$([Link])
The last step is to go to the render method and
return <li key={[Link]}>{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;
