FAQ: this.props - Render Different UI Based on props

Frequently Asked Questions React.js FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Render Different UI Based on props” exercise from the lesson “this.props”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Render Different UI Based on props

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Hello, I have a question about using props with conditional statements (if...then). Would it be possible to write a function instead?

For example, if I wanted to create a button to read a specific statement depending on whether the user is on a free Codecademy account versus a paid Pro account:

This is the way we learn to use props in the exercise:

export class Welcome extends React.Component {
  render() {
    if (this.props.paidAccount == false) {
      return (
      	<button>
      	  Upgrade to Pro Today!
      	</button>
      );
    } else {
      return (
      	<button>
      	  Thanks for Being a Pro!
      	</button>
      );
    }
  }
}

And this is the way I was interested in writing it using a function:

export class Welcome extends React.Component {
  const clickMe = () => {
    if (this.props.paidAccount === true) {
      return ‘Thanks for Being a Pro!’;
    } else {
      return ‘Upgrade to Pro Today!’;
    }
  };
  render() {
      return (
      	<button>
      	  {clickMe}
      	</button>
      );
    }
  }
}

Thanks for any guidance!

4

Hi, sorry i don’t speak good english, but in this exercice, ReactDOM.render of the Home.js file never display anything, it’s a bug ?

5

According to this code:

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="Alison" />
        <article>
          Latest:  where is my phone?
        </article>
      </div>
    );
  }
}

The property this.props.signedIn is not yet defined. This would normally mean that the evaluation of it should be ‘false’ since it’s non-existent in the code below (the 2nd <div> is my attempt to see what gets passed in props):

export class Greeting extends React.Component {
  render() {
  	if (this.props.signedIn === false) {
  	  return <h1>GO AWAY</h1>;
  	} else {
  	  return (
        <div>
          <h1>Hi there, {this.props.name}!</h1>
          <div>{JSON.stringify(this.props)}</div>
        </div>
      );
    }
  }
}

However, according to what’s being rendered to the screen, not defining the property seems to have evaluated to ‘true’ as we’re seeing content from the ‘Hi there’ branch. To confirm, the 2nd <div> I added which outputs the text for this.props shows: {"name":"Alison"}

Is this the expected behavior, or am I missing something?

6

Question: Why does the “false” here need curly brackets?

1 Like
7

Because false is being used as a Boolean.
[have a look at the condition if (this.props.signedIn === false) in Greeting.js ]

If you wrote the property as signedIn = "false", then you would be using a string instead of a Boolean. You would have to modify the condition in Greeting.js to if (this.props.signedIn === "false")

In this context, using false as a Boolean is more sensible. Hence signedIn={false} is a better choice.

1 Like
8

The problem is not that it’s evaluating to true - because it’s not.

The problem is in the explicit check:

if (this.props.signedIn === false)

This === false means that the if statement will only be true when signedIn is both defined and assigned a value of false

It would be better if they simply checked like this - i.e, is it not “truthy”:

if (!this.props.signedIn)

Then the if statement would evaluate as true whether signedIn were set to false OR not defined.

I’m guessing this was done this way for clarity’s sake, but in most languages explicitly comparing against true or false is a bit of a code smell.

For example if someFlag is a boolean you’d typically want to write:

if(someFlag)

rather than

if(someFlag === true)

2 Likes
9

Why in this example is false wrapped in curly braces when used in signedIn={false}?

1 Like