freeCodeCamp/index.md at 0a1eeea424e49c25c08a5b65ec66ac0ebec5e699

Files

Randell Dawson 0a1eeea424 fix(guide) Replace invalid prism code block names (#35961 )

* fix: replace sh with shell

fix replace terminal with shell

fix replace node with js

fix replace output with shell

fix replace cs with csharp

fix replace c++ with cpp

fix replace c# with csharp

fix replace javasctipt with js

fix replace syntax  with js

fix replace unix with shell

fix replace linux with shell

fix replace java 8 with java

fix replace swift4 with swift

fix replace react.js with jsx

fix replace javascriot with js

fix replace javacsript with js

fix replace c++ -  with cpp

fix: corrected various typos

fix: replace Algorithm with nothing

fix: replace xaml with xml

fix: replace solidity with nothing

fix: replace c++ with cpp

fix: replace txt with shell

fix: replace code with json and css

fix: replace console with shell

2019-05-15 19:08:19 +02:00

901 B

Raw Blame History

title

title
Render with an If/Else Condition

Render with an If/Else Condition

Method

Inside of the render method of the component, write if/else statements that each have its own return method that has different JSX. This gives programmers the ability to render different UI according to various conditions.

First, wrap the current return method inside of an if statement and set the condition to check if the variable 'display' is true. Remember, you access state using this.state.

Solution

if (this.state.display === true) {
  return (
    <div>
      <button onClick={this.toggleDisplay}>Toggle Display</button>
      <h1>Displayed!</h1>
    </div>
  );
}

Next, create an else statement that returns the same JSX without the h1 element.

else {
  return (
    <div>
      <button onClick={this.toggleDisplay}>Toggle Display</button>
    </div>
  )
}

901 B Raw Blame History

Render with an If/Else Condition

Method

Solution

901 B

Raw Blame History