How to CONDITIONAL RENDER in React ❓

Conditional rendering = allows you to control what gets rendered in your application based on certain conditions. (ex. show, hide, or change components)

[senisia]

i love your new react series. I just started learning it and you came out of nowhere

[BroCodez]

import UserGreeting from './UserGreeting.jsx'

function App() {
return(
<>
<UserGreeting isLoggedIn={true} username="BroCode"/>
</>
);
}
export default App

import PropTypes from 'prop-types';

function UserGreeting(props){

const welcomeMessage = <h2 className="welcome-message">
Welcome {props.username}
</h2>

const loginPrompt = <h2 className="login-prompt">
Please log in to continue
</h2>

return(props.isLoggedIn ? welcomeMessage : loginPrompt);

}
UserGreeting.proptypes = {
isLoggedIn: PropTypes.bool,
username: PropTypes.string,
}
UserGreeting.defaultProps = {
isLoggedIn: false,
username: "Guest",
}
export default UserGreeting

.welcome-message{
font-size: 2.5em;
background-color: hsl(120, 100%, 42%);
color: white;
padding: 10px;
border-radius: 5px;
margin: 0;
}
.login-prompt{
font-size: 2.5em;
background-color: hsl(0, 100%, 42%);
color: white;
padding: 10px;
border-radius: 5px;
margin: 0;
}

[g.ryanpeterson]

Just started learning React and your videos are very easy to follow and learn from. Thank you!!

[aungaungab]

Please make a full react series course 🙏🙏🙏🙏🙏

[NazneenNaharNishi]

Bro make a complete tutorial for android courses are completely educative.❤❤❤❤❤

[TahaZolfi]

bro code teaches you so good that u feel its so easy

[eduardokawaguchi]

Nice video, Bro! Here's a quick tip: press "alt +z" in your script, it'll break the rows automatically.

[Legacylanes_moto]

great series bro.. byte sized tutorials makes life easier. Thanks.. waiting for more.

[name_yug]

Pls make a full course on react and typescript

[shivanshuhere]

simple and clear explanation :)
loved it <3

[AIZEN]

Even though I know React, I enjoy watching your videos

[unknown-person-.]

i beg you to make a small python episode in which you will teach how to communicate between server and client in lan using sockets and how to move a thing from buttons using server so connected clients would see the change

[andromilk]

Since you were using Javascript variables, wouldn't you need to use {} on here as well like you usually do? Or are those not necessary in conditionals? Thanks!

[Ken-zhgu]

Please do full django course python web development framework if you can

[lokrajpyakurel]

Waiting for new video on React from Bro Code 😊

[indology]

bro please make mastery level detail. detail to detail python full couse, make a course that by doing that one can become Albert Einstain of coding.

[bladebeats]

please make a video on how to automate ur work using python

[Ceszilla]

Can you please explain how to upload images to a react project?

[manojmurugan]

Bro please upload full video
How to contact you for courses for paid

[etcqcjs]

do you plan to make advance c# course ?