This content originally appeared on DEV Community and was authored by Mayuresh Surve
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>
Key Points
- Iteration: The
mapmethod is used to iterate over thepizzaDataarray, creating aPizzacomponent for each pizza object. - Props: Each pizza object is passed to the
Pizzacomponent via props for rendering. - Unique Keys: A unique
keyprop is provided to eachPizzacomponent, which is crucial for helping React identify and manage components efficiently during re-renders.
Conditional Rendering Techniques
Conditional rendering in React allows you to dynamically display elements based on certain conditions. Today, I explored several common techniques for conditional rendering:
1. Conditional Rendering with && Operator
The && operator is used for conditional rendering when you want to display an element only if a certain condition is true.
Example: Footer Component
function Footer() {
const hour = new Date().getHours();
const openHour = 10;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
return (
<footer className="footer">
{isOpen && (
<p>
We're happy to welcome you between {openHour}:00 and{" "}
{closeHour}:00.
</p>
)}
</footer>
);
}
This example uses the && operator to conditionally render a message if the current time is within operating hours.
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.
2. Conditional Rendering with Ternary Operator
The ternary operator is useful when you have two possible outcomes based on a condition.
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>
) : (
<p>
We're still working on our menu. Please come back later :)
</p>
)}
</>
);
}
This example uses the ternary operator to decide whether to render the pizza list or a message indicating that the menu is being prepared.
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.
3. Conditional Rendering with Multiple Returns
Using multiple return statements allows you to exit a component early based on a condition.
Example: Footer Component
function Footer() {
const hour = new Date().getHours();
const openHour = 13;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);
if (!isOpen) {
return <h1>CLOSED</h1>;
}
return (
<footer className="footer">
<p>
We're open from {openHour}:00 to {closeHour}:00. Come visit us
or order online.
</p>
</footer>
);
}
Here, if the restaurant is closed, the function returns early with a CLOSED message, otherwise, it continues to render the open hours message.
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>
);
}
In this example, if a pizza is sold out, the component returns null, which means nothing is rendered for that pizza.
Key Takeaways
- Efficiency: Conditional rendering allows for efficient rendering of components, ensuring only the necessary elements are displayed based on the current state or data.
- Flexibility: Each technique provides different levels of flexibility and readability, making it easier to choose the most appropriate method for your specific use case.
Conclusion
Today’s learning journey has equipped me with the skills to manage list rendering and conditional rendering effectively in React. These techniques form the backbone of creating interactive and data-driven user interfaces. I look forward to applying these concepts as I continue my React learning journey.
Stay tuned for more updates as I dive deeper into React!
Check out my GitHub for code samples and projects.
Connect with me on LinkedIn to stay updated on my latest projects and insights!
This content originally appeared on DEV Community and was authored by Mayuresh Surve
Mayuresh Surve | Sciencx (2024-08-03T17:37:33+00:00) 🚀 Day 5: Exploring List Rendering and Conditional Rendering in React🚀. Retrieved from https://www.scien.cx/2024/08/03/%f0%9f%9a%80-day-5-exploring-list-rendering-and-conditional-rendering-in-react%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.