Challenges

React Props

More on Props

Now, have a look at this:

function Welcome(props) {
  if (props.age) {
    return (
      <div>
        <hr/>
        <p>Hey {props.name}, You are {props.age} years old.</p>
      </div>
    )
  }
  
    return (
        <div>
            <hr/>
            <p>Hey {props.name}, Welcome to React</p>
        </div>
    )
}

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome name="Arunoda" age={20}/>
        </div>
    )
}

When you run this, you will get a message like this:

Hey Arunoda, You are 20 years old.

As you can see, here we render something differently based on props. This is one of the reasons for React's popularity and flexibility. Now you can control what to render right inside JavaScript without switching context between templates & data.


Have a look at the following variations of our React component Page. One of them is incorrect.

(Use this React playground to try React)

Version 1

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome name={"Arunoda"} age={20}/>
        </div>
    )
}

Version 2

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome name="Arunoda" age=20/>
        </div>
    )
}

Version 3

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome name={"Arunoda"} age="20"/>
        </div>
    )
}

Version 4

function Page() {
    return (
        <div>
            <h1>Hello World</h1>
            <Welcome name={`Arunoda`} age={20}/>
        </div>
    )
}
Q: What's the incorrect version?
authenticating...

🙏 We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: