FAQ: Components and Advanced JSX - Use a Conditional in a Render Function

Frequently Asked Questions JavaScript FAQ
1

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

This community-built FAQ covers the “Use a Conditional in a Render Function” exercise from the lesson “Components and Advanced JSX”.

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

Web Development

Learn ReactJS: Part I

FAQs on the exercise Use a Conditional in a Render Function

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

Can anyone please explain why const fiftyFifty = Math.random() < 0.5; makes a boolean value?

3

comparisons (Math.random() < 0.5) always result in a Boolean value? Because a comparison is either true or false

1 Like
4

Having recently ‘discovered’ the ternary operator syntax in Javascript, I wanted to give it a go for this section of the course.

class TonightsPlan extends React.Component {
  render() {
    return (
      fiftyFifty ?
      <h1>Tonight I'm going out WOO</h1> :
      <h1>Tonight I'm going to bed WOO</h1>
    );
  }
}

Would this be considered bad practice in ReactJS? If so, what would be the ‘best’ solution?
Thanks!

3 Likes
5

On such a small detail its nearly insignificant what you use here.

6

For those of you confused:

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:
class TonightsPlan extends React.Component {
  render () {    
    let plan; /* Create your variable to store the string */
    if (!fiftyFifty) {
    	plan = 'going out WOOO' /* if true our variable will tag this to the end of the h1 */
    } else {
      plan = 'going to bed WOOO' /* if false our variable will tag this to the end of the h1 */
    }
    
    return <h1>Tonight I'm {plan}</h1> /* to make things easier I added the i'm here because that disrupts the code above */
  }
}

ReactDOM.render(<TonightsPlan />, document.getElementById('app'));
3 Likes
7

It is not working - so, where did my code go wrong?

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;
class TonightsPlan extends React.Component {
  render() {
    let task;
    if (fiftyFifty === true) {
      task = 'out WOOO'
    } else {
      task = 'to bed WOOO'
    }
    
    return <h1>Tonight I'm going {task}!</h1>;
  }
};

ReactDOM.render(
	<TonightsPlan />,
	document.getElementById('app')
);
8

I figured it out. The ! at the end of {task} was throwing off the validation/syntax checker…

9

Can anyone help me on why the following isn’t working?

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:
class TonightsPlan extends React.Component {
  render() {
    let result;
    if(fiftyFifty) {
      result =  'out'
    } else {
      result = 'to bed'
    }
    
    return <h1> Tonight I'm going {result} WOOO</h1>;
  }
};

ReactDOM.render(<TonightsPlan />, document.getElementById('app'));
1 Like
10

string comparison sucks sometimes, there can’t be a space between <h1> and Tonight

11

This is so old, but I haven’t seen this syntax before, the bang before the function variable…

if (!fiftyFifty)

I am assuming it’s a short hand for truthy?

12

fiftyFifty is just a variable, how is it a function?

! reverse the result, !true === false.

13

Sorry for the wording. Its a variable of the function of the same name.

I know what bang usually does.

But the If statement is using it as if it were comparing it to true or false, thats what I’m hung up on.

I guess I didn’t know we can shorthand a true/false to just the variable.

14

we don’t have to do a comparison, this:

if (true) { console.log('hello world'); }

is perfectly legit. or:

if ('hello world'){ console.log(true); }

a bit more more practical example would be:

if (someFunction()){ 
   // do something
}

where someFunction does some complicated logic for example. By placing this logic in its own function, you can reuse that logic.

16

How come the ternary operator is not working in this case?

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:

class TonightsPlan extends React.Component{
  render(){
    fiftyFifty ? 'to bed' : 'out'
    return(
      <h1>Tonight I'm going{fiftyFifty}WOO</h1>
    )
  }
}

ReactDOM.render(<TonightsPlan/>,document.getElementById('app'))
17

the ternary operator returns the correct result, so you would need to capture the result in a variable:

fiftyFifty = fiftyFifty ? 'to bed' : 'out';
18

I appreciate you getting back to me but it still doesn’t want to render!

import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:

class TonightsPlan extends React.Component{
  render(){
    fiftyFifty = fiftyFifty ? 'to bed' : 'out';
    return <h1>Tonight I'm going {fiftyFifty} WOO</h1>
  }
}

ReactDOM.render(<TonightsPlan/>,document.getElementById('app'))
19

really? I tried your code, and i have no issues with it.

20

I have no clue and its driving me insane…

21

it looks fine, maybe refresh the lesson or even copy your code and reset the lesson?

1 Like