Conditional Rendering in React | Explained with Examples | The Complete React Course | Ep.17

📖 Chapters
00:00 - Introduction
00:18 - Quick Assignment: Try to implement Conditional Rendering in React by yourself
02:36 - What is Conditional Rendering in React?
08:58 - When do we use Conditional Rendering in real life?
11:09 - Conclusion

Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.

Social Media

Music by geoffharvey from Pixabay

#react #procodrr #webdevelopment

[NirbhayMarde-qzkj]

2:20 My answer -
const Basket = ({ applesCount, basketName }) => {
const basketState = (applesCount == 10) ? "(full)" : (applesCount == 0) ? "(Empty)" : "";
return (
<div className="flex flex-1 flex-col items-center gap-2 p-4">
<h2 className="text-xl font-bold">{applesCount} Apples</h2>
<h3 {basketState}</h3>
</div>
);
}

[ankitaggarwal]

Controlled and Uncontrolled Component, Lifting up state ki video update kar do.

[subratacoder]

05:25 we can use {appleNum === 10 ? "(full)": null} beacuse react dont print null