Conditional Rendering & Rendering Lists in React | Sigma Web Development Course - Tutorial #110

➡️ English Subtitles are now up for all the videos!

TimeStamps ⌚
00:00 Introduction
00:15 Sigma Web Dev Intro
00:25 Conditional Rendering
08:21 List Rendering
16:13 Takeaways
18:07 Conclusion
18:43 Sigma Outro

python, C, C++, Java, JavaScript and Other Cheatsheets [++]:

►Learn in One Video[++]:

►Complete course [playlist]:

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[InfinityCode-xokt]

Bro i am watching your this course and i got placed as a front web developer in 4LPA. Bro your this course is the best thanks bro

[shivamrai]

So beautiful,
So elegant,
Just teaching like a WoW❤ .
Bhaiyaa lajwaab padhate ho aap.

[Hafijur]

🎯 Key Takeaways for quick navigation:

00:00 *📝 Conditional rendering and rendering lists in React are demonstrated in this video.*
- React's map method in JavaScript is used for rendering lists.
- Conditional rendering is a common technique used in almost every React application.
01:00 *🧰 Conditional rendering in React can be achieved by using a simple technique.*
- Use a state variable to control the visibility of elements.
- Use a ternary operator in JSX to conditionally render elements based on the state variable.
02:38 *🔍 Inspecting elements in the browser can help understand conditional rendering behavior.*
- Right-clicking and selecting "Inspect" on the button can show if it's currently being displayed or not based on the state.
- Changing the state value can dynamically show or hide the button.
04:14 *📱 Rendering Conditional Elements in React*
- Conditional rendering in React allows you to show or hide elements based on certain conditions.
- In JavaScript, you can use the ternary operator (`condition ? true : false`) for conditional rendering in JSX.
- Use `{condition &&

[Soulcode-k]

⚠Note⚠: when u make component inside a component make sure the first letter is capital letter otherwise u will see that component blank like:
const ToDo = ()=>{
return (<>
<h1>Hello i am the TODO</h1>
</>)
}

if you write it as toDo <-- which is not supported for some reason.

18:22 I can somehow feel the pain he suffered when bro was try to solve this😂.
React 0P. ❤❤❤❤❤❤❤❤❤❤❤❤❤

[areebnadir]

00:01 Rendering lists in React using the map method
02:15 Using ternary operator to conditionally render a button in React.
04:01 Conditional rendering in React
05:53 Conditional rendering is done using the ternary operator.
07:43 Creating a function component in React
09:48 Rendering lists in React using a for loop and map function
11:41 Ensure to follow framework guides for smooth execution.
13:35 Rendering lists in React requires unique keys for each element.
15:19 Conditional rendering and rendering lists in React
16:59 React requires a unique attribute for conditional rendering and rendering lists.
19:00 Conditional rendering and rendering lists in React
Crafted by AI.

[nithenbains]

lets roll the intro hits next level vibes🔥🔥🔥

[nomatterff]

4:08 Mobile me dekhne walo idhar apna. 👇 attendance do

[Shabareesha]

This lesson is little bit confusing, lekin dubara deklenge 😎😎

[gouravkhare]

Sir can I use python with HTML, CSS instead of Java script?
Which language is best for game and virtual reality development?

[AZCodez]

can we use array index as a key 17:10

[hkkumawat]

harry bhai you made me to do it again you so much harry this inflation time you ae providing us this Webd course for thank you so much harry bhai🤗🤗🤗🤗😃😃😃😃

[amirever]

harry bhai aap saare topic ko bohot easy kar dete ho love you 10 rupey ki pepsi harrry bhai se*y harry bhai zindabad harry bhai zindabad harry bhai zindabad

[amritanshrai]

Harry bhai thode full stack projects bhi banvado idea lag jaye ki full stack projects kaise banana hai❤❤

[kanishkchaudhary]

thanks harry bhai you always taught us best things

[tridev]

Harry Bhai, i am humble request make a full video for software developers also.

[ds__]

Harry bhaia Aaj se start krr rha hoon course aapka starting se ek date bol do reply mein wahan tk ka Target rkhta hoon usse date tk complete krne ka ❤

[Pankaj-sxmc]

I just start watching this playlist, can anybody suggest me anything from your experience, how can i continue this journey, how much videos in a day etc etc, your single reply is very helpful for me ❤

[faizalsayed]

Harry please make a video series on Data Engineering

[jkssharma]

Kya code React.js aur vite dono me kaam karega ?

[hardikbchaudhary]

In my news web project I want to allow users to view three news articles without login if user reach the limit then it should redirect on login page... I can use local storage or session cookies but user can clear it or if I use counter or state variable so on page reload it not working so how can I achieve this functionality in my react project please guide me