Use a Conditional in a Render Function


#1

I don't understand why my code doesn't work

var React = require('react');
var ReactDOM = require('react-dom');

var fiftyFifty = Math.random() < 0.5;

// React.createClass call begins here:
var TonightsPlan = React.createClass({
render: function () {
var task;
if (fiftyFifty==true) {
task ="Tonight I'm going out WOOO"
} else {
task = "Tonight I'm going to bed WOO"
}

 return <h1>{task}!</h1>;

}
});

ReactDOM.render(
,
document.getElementById('app')
);

Replace this line with your code.

`


#2

I'm having the same problem as you are. Why not try this:
if (fiftyFifty === true)

Keep in mind that when doing logical comaprisons, it's usually 3 equal signs (=). Though I tried that and it still didn't work. I tried doing this as well

if (fiftyFifty) with no luck either.


#3

I was stuck at the first stage of this exercise for the last hour until finally I got it. I am not sure what I was doing wrong earlier, so I suspect a bug might be the cause. Anyway what worked was this:

I declared the task variable like thus:

var task ="";

In the if statement you can evaluate the fiftyFifty variable simply like this;

(fiftyFifty) {}

#4

Hey m_rydberg,

I tried doing the if statement that way but it still didn't work for me. How were you able to do it because var task is located in TodaysPlan.js not app.js.


#5

Var task is just a the variable name I reused. To not confuse the two files. Let's call it var message instead.

First thing inside of the render function I declared the variable not as undefined but as an empty string variable.

var message ="";

Next was the if statement this condition.

if (fiftyFifty) {}

When I worked on this exercise I was about to report a bug when suddenly my umpteenth attempt worked just fine. Unfortunately I am not sure of the steps that made a difference and if what I mentioned about the variable declaration above is even relevant.

Ultimately what you write in app.js is going to have to look very similar to TodaysPlan.js The difference ought to be in the condition you test for true or false.

http://stackoverflow.com/questions/13127126/javascript-difference-in-method-for-evaluating-true-false-values


#6

it ok an implicit condition participate in solving the problem and also m_rydberg, thanks both


#7

that oworks for me:

var React = require('react');
var ReactDOM = require('react-dom');

var fiftyFifty = Math.random() < 0.5;

// React.createClass call begins here:
var TonightsPlan = React.createClass({
render: function () {
var task;
if (fiftyFifty) {
task = "Tonight I'm going out WOOO"
} else {
task = "Tonight I'm going to bed WOOO"
}

return <h1>{task}</h1>;

}
});

ReactDOM.render(
,
document.getElementById('app')
);


#10

So my embarrassing mistake was that I forgot to put a return statement in the .createClass function. Hope everyone has solved their issues with their code.

Happy Coding everyone!


#11

Hello! Can someone point out why this code is not passing? The instruction is to add a nested h1 inside the div and then inject friend.title. I tried different ways (code in one line, starting code on line 20, ...) but I can't get pass instruction #4.

var Friend = React.createClass({
  render: function () {
    var friend = friends[1];
    return (
      <div>
        <h1>{friend.title}</h1>
      </div>
    );
  }
});

#12

what if fiftyFifty returns false?
I prefer this conditional:

    if(fiftyFifty == true) {
    task = "Tonight I'm going out WOOO"
    } else {
    task = "Tonight I'm going to bed WOOO"
    }

#13

var React = require('react');
var ReactDOM = require('react-dom');

var fiftyFifty = Math.random() < 0.5;

// React.createClass call begins here:
var TonightsPlan = React.createClass({
render: function () {
if (fiftyFifty === true){
return (Tonight I'm going out WOOO);
}
else{
return (Tonight I'm going to bed WOOO);
}
}

});

ReactDOM.render(, document.getElementById('app'));

You can return the Seperatly if you wish (take out the full stops after the h1's!


#14

I could not get it to work so I tried some of the suggestions here I then tried
var React = require('react');
var ReactDOM = require('react-dom');

var fiftyFifty = Math.random() < 0.5;

// React.createClass call begins here:
var TonightsPlan = React.createClass({
render: function () {
var message;
if(fiftyFifty === true) {
message = " out "
} else {
message = " to bed "
}
return

Tonight I'm going{message}WOOO!

;
}
});
ReactDOM.render( , document.getElementById('app'));

which worked in side bit but still would not let me pass, any ideas where I am going wrong?
many thanks in advance.


#15

Doh, I sorted it , it was because I stuck an exclamation mark in which shouldn't be there !


#16

Hello i'm stuck with this exercice4. Use a conditionnal in a render function.

I'think my error is probably at the if() this is my code ;
var TonightsPlan = React.createClass({
render: function(){

var task;
if(fiftyFifty) {
  task = "out" 
}else{
  task = "to bed"
}
return (
	<h1>Tonight I'm going {task} WOOO</h1>;
);

}
});

ReactDOM.render(
,
document.getElementById('app')
);


#17

Try putting in === true after the fiftyFifty


#18

I tried but i got error "Oops! The test returned an error. Maybe you have a syntax error, or a typo. See full error"


#19

Try removing the bracket after return so that it says-
return <h1> Tonight I'm going to{task}WOOO</h1>;
}
});

#20

The solution is to write the return on 1 line !!
var TonightsPlan = React.createClass({
render: function(){

var task;
if(fiftyFifty === false) {
  task = "out" 
}else{
  task = "to bed"
}
return <h1>Tonight I'm going {task} WOOO</h1>;

}
});

ReactDOM.render(
,
document.getElementById('app')
);


#21

Thanks bro this code works:slight_smile:


#22

This Worked for me

var React = require('react');
var ReactDOM = require('react-dom');

var fiftyFifty = Math.random() < 0.5;

// React.createClass call begins here:
var TonightsPlan = React.createClass({
render: function(){

var task;
if(fiftyFifty === false) {
  task = "out" 
}else{
  task = "to bed"
}
return <h1>Tonight I'm going {task} WOOO</h1>;
}
});

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