About Lesson
React Conditional Rendering:
In React, conditional rendering allows you to display different components or UI elements based on certain conditions. This is useful when building a notes application, where you might want to show different UI states depending on whether there are notes available or not.
Using if-else Statement:-
JavaScript
function NotesList({ notes }) {
if (notes.length === 0) {
return <p>No notes available.</p>;
} else {
return (
<ul>
{notes.map((note, index) => (
<li key={index}>{note}</li>
))}
</ul>
);
}
}
Using Ternary Operator:
JavaScript
function NotesList({ notes }) {
return (
<div>
{notes.length > 0 ? (
<ul>
{notes.map((note, index) => (
<li key={index}>{note}</li>
))}
</ul>
) : (
<p>No notes available.</p>
)}
</div>
);
}
Using Logical && Operator:
JavaScript
function NotesList({ notes }) {
return (
<div>
{notes.length > 0 && (
<ul>
{notes.map((note, index) => (
<li key={index}>{note}</li>
))}
</ul>
)}
{notes.length === 0 && <p>No notes available.</p>}
</div>
);
}