How to CONDITIONAL RENDER in React ❓

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ต.ค. 2023
  • Conditional rendering = allows you to control what gets rendered in your application based on certain conditions. (ex. show, hide, or change components)

ความคิดเห็น • 43

  • @senisia
    @senisia 9 หลายเดือนก่อน +8

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

  • @BroCodez
    @BroCodez  9 หลายเดือนก่อน +12

    import UserGreeting from './UserGreeting.jsx'
    function App() {
    return(



    );
    }
    export default App
    import PropTypes from 'prop-types';
    function UserGreeting(props){
    const welcomeMessage =
    Welcome {props.username}

    const loginPrompt =
    Please log in to continue

    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;
    }

    • @imbomb
      @imbomb 9 หลายเดือนก่อน

      Pls I beg of you don't relent so as we aren't.Just keep posting videos till this module is complete.React is a very important aspect in Frontend Development

    • @unknown-person-14.
      @unknown-person-14. 9 หลายเดือนก่อน

      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

    • @anesmessahli5863
      @anesmessahli5863 9 หลายเดือนก่อน

      Yo pls can u suggest to me wich video i should watch to learn html and css .. you have a 1hour video of html and 1hour video of css also you have a 4hour video such as a combination between the last twos.. so what should i watch ?

    • @indology7975
      @indology7975 9 หลายเดือนก่อน

      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.

  • @g.ryanpeterson9686
    @g.ryanpeterson9686 9 หลายเดือนก่อน +1

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

  • @shivanshuhere
    @shivanshuhere 7 หลายเดือนก่อน

    simple and clear explanation :)
    loved it

  • @Legacylanes_moto
    @Legacylanes_moto 8 หลายเดือนก่อน

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

  • @TahaZolfi
    @TahaZolfi 9 หลายเดือนก่อน

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

  • @NazneenNaharNishi
    @NazneenNaharNishi 9 หลายเดือนก่อน +1

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

  • @andromilk2634
    @andromilk2634 6 หลายเดือนก่อน

    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!

  • @aungaungab1967
    @aungaungab1967 9 หลายเดือนก่อน +12

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

  • @elawet435
    @elawet435 9 หลายเดือนก่อน +1

    Thank u so much my Bro

  • @eduardokawaguchi3086
    @eduardokawaguchi3086 13 วันที่ผ่านมา

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

  • @houdariyad4889
    @houdariyad4889 9 หลายเดือนก่อน

    can't thank u enough bro

  • @ngehbrandon9491
    @ngehbrandon9491 9 หลายเดือนก่อน

    Thanks for the video bro

  • @name_yug
    @name_yug 9 หลายเดือนก่อน +1

    Pls make a full course on react and typescript

  • @AIZEN155
    @AIZEN155 9 หลายเดือนก่อน

    Even though I know React, I enjoy watching your videos

  • @Delicatamente
    @Delicatamente 3 หลายเดือนก่อน

    huge thanks!

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 9 หลายเดือนก่อน

    Thank you so much sir ❤❤

  • @d1ce966
    @d1ce966 9 หลายเดือนก่อน

    Bro post more react i love it

  • @1T_pressly
    @1T_pressly 9 หลายเดือนก่อน

    Thank you bro for the code

  • @hunin27
    @hunin27 9 หลายเดือนก่อน

    thanks! ❤

  • @Ceszilla
    @Ceszilla 9 หลายเดือนก่อน

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

  • @user-et6cq4cj5s
    @user-et6cq4cj5s 9 หลายเดือนก่อน

    do you plan to make advance c# course ?

  • @unknown-person-14.
    @unknown-person-14. 9 หลายเดือนก่อน

    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

  • @pintertenan8057
    @pintertenan8057 9 หลายเดือนก่อน +1

    Greeting from a bro!

  • @lokrajpyakurel2563
    @lokrajpyakurel2563 9 หลายเดือนก่อน

    Waiting for new video on React from Bro Code 😊

  • @graiselin2791
    @graiselin2791 9 หลายเดือนก่อน

    Love you 😘😘

  • @manojmurugan590
    @manojmurugan590 9 หลายเดือนก่อน

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

  • @bladebeats7375
    @bladebeats7375 9 หลายเดือนก่อน

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

  • @Ken-zh4gu
    @Ken-zh4gu 4 หลายเดือนก่อน

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

  • @indology7975
    @indology7975 9 หลายเดือนก่อน

    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.

  • @vishnuk6417
    @vishnuk6417 9 หลายเดือนก่อน

    Hii.....! it's 13th comment 😍😍

  • @Gunz1234
    @Gunz1234 9 หลายเดือนก่อน

    Bro Code ❤

  • @Yakuzanis
    @Yakuzanis 9 หลายเดือนก่อน

    Bro Code = Chad Code

  • @kaungkinzone2448
    @kaungkinzone2448 9 หลายเดือนก่อน

    random comment 4.0