Welcome to Day 5 of my React Learning Journey! Today, I delved into some fundamental concepts of React that are crucial for building dynamic and interactive applications: rendering lists and various techniques for conditional rendering. These concepts are essential for managing how components are displayed based on data and user interactions. Here’s what I learned:
Rendering Lists
In React, rendering lists involves iterating over an array of data and creating components for each item in the array. This is commonly done using the JavaScript map method. Here's an example using a list of pizza items:
Given below is the list of pizzas:
const pizzaData = [
{
name: "Focaccia",
ingredients: "Bread with Italian olive oil and rosemary",
price: 6,
photoName: "https://imgur.com/C3Ca4BS.png",
soldOut: false,
},
{
name: "Pizza Margherita",
ingredients: "Tomato and mozzarella",
price: 10,
photoName: "https://imgur.com/lipmW8F.png",
soldOut: false,
},
{
name: "Pizza Spinaci",
ingredients: "Tomato, mozzarella, spinach, and ricotta cheese",
price: 12,
photoName: "https://imgur.com/APdaPZR.png",
soldOut: false,
},
{
name: "Pizza Funghi",
ingredients: "Tomato, mozzarella, mushrooms, and onion",
price: 12,
photoName: "https://imgur.com/dPpvWzM.png",
soldOut: false,
},
{
name: "Pizza Salamino",
ingredients: "Tomato, mozzarella, and pepperoni",
price: 15,
photoName: "https://imgur.com/9dtZJNE.png",
soldOut: true,
},
{
name: "Pizza Prosciutto",
ingredients: "Tomato, mozzarella, ham, arugula, and burrata cheese",
price: 18,
photoName: "https://imgur.com/jii9M6S.png",
},
];
Pizza component is written as follows:
function Pizza({ pizzaObj }) {
return (
<li className="pizza">
<img src={pizzaObj.photoName} alt={pizzaObj.name} />
<div>
<h3>{pizzaObj.name}</h3>
<p>{pizzaObj.ingredients}</p>
<span>{pizzaObj.price}</span>
</div>
</li>
);
}
We can render list using map array function as:
<ul className="pizzas">
{pizzas.map((pizza) => (
<Pizza pizzaObj={pizza} key={pizza.name} />
))}
</ul>
Example: Menu Component
function Menu() {
const pizzas = [];
return (
<>
<h1>Our Menu</h1>
{pizzas.length > 0 && (
<ul className="pizzas">
{pizzas.map((pizza) => (
<Pizza pizzaObj={pizza} key={pizza.name} />
))}
</ul>
)}
</>
);
}
In this example, the list of pizzas is rendered only if there are items in the pizzas array.
Example: Footer Component
function Footer() {
const hour = new Date().getHours();
const openHour = 10;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);
return (
<footer className="footer">
{isOpen ? (
<p>
We're open from {openHour}:00 to {closeHour}:00. Come visit
us or order online.
</p>
) : (
<p>
We're happy to welcome you between {openHour}:00 and{" "}
{closeHour}:00.
</p>
)}
</footer>
);
}
In this example, the ternary operator is used to render different messages depending on whether the restaurant is open.
Example: Pizza Component
function Pizza({ pizzaObj }) {
if (pizzaObj.soldOut) {
return null;
}
return (
<li className="pizza">
<img src={pizzaObj.photoName} alt={pizzaObj.name} />
<div>
<h3>{pizzaObj.name}</h3>
<p>{pizzaObj.ingredients}</p>
<span>{pizzaObj.price}</span>
</div>
</li>
);
}
for code samples and projects.
Connect with me on LinkedIn to stay updated on my latest projects and insights!
SOCIAL SHARE CARD GENERATOR