TIL: Starting with React, Part 3

Today’s lectures introduced how to deal with conditional operators when working with React. The author of the lectures introduced two different ways to use them when rendering things conditionally based on a specific state. While both of the examples were pretty straight forward, the syntax and handling of it all just seems… I don’t know, kind of clunky I guess. Maybe this will be addressed as I go on in the course, but I can see files getting huge with all of these conditional rendering blocks of code.

Anyways, here are the notes that I collected from this evening’s lessons (tomorrow will be handling lists, so I’m eager to jump into that):

Basic Conditionals

  • Can use ternary operator to deal with conditional statements
  • For example, you can write an if block in the following way:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
   this.state.showPersons ?
       <div>
           <Person
               name={this.state.persons[0].name}
               age={this.state.persons[0].age}/>
           <Person
               name={this.state.persons[1].name}
               age={this.state.persons[1].age}
               click={this.switchNameHandler.bind(this, 'fuzzylimes')}
               changed={this.nameChangedHandler}>Hobbies: Cooking</Person>
           <Person
               name={this.state.persons[2].name}
               age={this.state.persons[2].age}/>
       </div> : null
}
  • Could also use something like this.state.showPersons === true ?...
  • The prefered alternative to this is to do it in a more javascript way, with writing a function within the render method. This will cause the function to be executed/evaluated every time that React needs to re-render the DOM.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
let persons = null;
if (this.state.showPersons) {
   persons = (
   <div>
       <Person
       name={this.state.persons[0].name}
       age={this.state.persons[0].age} />
       <Person
       name={this.state.persons[1].name}
       age={this.state.persons[1].age}
       click={this.switchNameHandler.bind(this, 'fuzzylimes')}
       changed={this.nameChangedHandler}>Hobbies: Cooking</Person>
       <Person
       name={this.state.persons[2].name}
       age={this.state.persons[2].age} />
   </div>
   );
}
  • Using this syntax, you only need to include a {persons} in the render return.
  • This method is recommended over the previous

💚