SkillPies.com

Conditional Rendering

/

Introduction

      import React from 'react';

function QuirkyAgeGreeter(props) {
  const { age } = props;

  if (age < 18) {
    return (
      <div>
        <h1>Hey there, little squirt!</h1>
        <p>Welcome to the wacky world of React!</p>
      </div>
    );
  } else {
    return (
      <div>
        <h1>Greetings, esteemed individual.</h1>
        <p>We're delighted to have you in our quirky React application.</p>
      </div>
    );
  }
}

function App() {
  return <div>
    <QuirkyAgeGreeter age={12} />
    <QuirkyAgeGreeter age={44} />
  </div>
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

Javascript

/

Truthy and Falsy

Falsy Values

false - The boolean false .
0 - The number zero.
-0 - The negative zero.
"" or '' or `` - Empty strings (single, double, or template literals).
null - The absence of any value.
undefined - A variable declared but not assigned a value.
NaN - Not-a-Number value.

Truthy Values

true - The boolean true.
Non-zero numbers (positive or negative, including floating points) - e.g., 1, -5, 3.14.
Non-empty strings - e.g., "Hello", 'false', " ".
Objects and arrays - e.g., {}, [].
Functions - Any function.
Infinity and -Infinity .
Symbol values.

Conditions

/

Ternary Operator

      console.log(undefined && "Boo")
console.log(8 && "Boo")
console.log(1 && "A" && 3 && 4)
console.log("Foo" && "Boo")

console.log(1 || "Boo")
console.log(0 || "Boo")
console.log("Foo" || "Boo")

console.log("A" || null && 0)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

React Rendering

/

Truthy and Falsy

      const App = () => {
  return (
    <ul>
      <li><b>true</b>: {true}</li>
      <li><b>false:</b> {false}</li>
      <li><b>null:</b> {null}</li>
      <li><b>undefined:</b> {undefined}</li>
      <li><b>0:</b> {0}</li>
      <li><b>NaN:</b> {NaN}</li>
      <li><b>[]</b>: {[]}</li>
      <li><b>[1, "a", 3]</b>: {[1, "a", 3]}</li>
    </ul>
  );
};

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

ul {
  padding-left: 32px;
}

Conditions

/

Null Coalescing

      import React from 'react';

function UserProfile({ userName, userBio }) {
  const displayName = userName ?? 'Anonymous';
  const displayBio = userBio ?? 'No bio available';

  return (
    <div>
      <h1>Welcome, {displayName}!</h1>
      <p>{displayBio}</p>
    </div>
  );
}

// Usage
function App() {
  return (
    <div>
      <UserProfile 
        userName={undefined} 
        userBio={null} 
      />
      <UserProfile 
        userName="Tomas" 
        userBio="Jedi Forever" 
      />
    </div>
  )
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

In React, the null coalescing operator is especially useful when setting default values for props or states that might be null or undefined. It helps ensure that your components render correctly even if the data isn't unavailable or something went wrong somewhere else in your code.
Let's consider a simple React component that displays a user's profile information, but sometimes, the user's name or bio might not be available. We can use the null coalescing operator to handle these cases gracefully. This operator returns the value before the two question marks if that value is not null or undefined. Otherwise, it returns the value after the two question marks.
This approach ensures that your component always has valid data to display and avoids any potential issues or crashes that might occur if it tries to access null or undefined values.

Javcascript

/

Ternary Operator

      console.log(true ? "Valeria" : "Tomas")

const a = 1000;
console.log(a < 500 ? "Profit" : "Loss")

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

Conditions

/

Ternary Operator

      import React from 'react';

function UserProfile({ name, bio, age }) {
  return (
    <div>
      <h1>
        { age < 18 ? 'Yo, ': 'Welcome, ' }
        { 
          name 
          ? name 
          : <span style={{ color: 'red' }}>
              No User Name
            </span>
        }!
      </h1>
      <p>{
        bio 
        ? bio 
        : 'No bio available' }</p>
    </div>
  );
}

// Usage
function App() {
  return (
    <>
      <UserProfile 
        name="Tomas" 
        bio={null} 
        age={6} 
      />
      <hr />
      <UserProfile 
        name={null}
        bio="Invisible man" 
        age={44} 
      />
    </>
  )
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

Let's use the same React component from before, but this time we'll use the ternary operator to handle the conditions. This will help illustrate the difference between using the null coalescing operator and the ternary operator. Here's how you can rewrite the UserProfile component using the ternary operator.
The component accepts three parameters: userName, userBio and userAge
The first ternary operator renders greeting based on use age.
The second ternary operator renders the user's name or shows an error that this data is missing. See that we can return JSX code in the ternary operator as well!
Last, we either existing user's bio, or show that bio is not available,
We render two different variations of the profile component, one with a young age and a specified name. The other with a missing name and older age.

Conditions

/

Logical Chains

      console.log(null || "Tomas")
console.log(null && "Tomas")
console.log("Valeria" && "Tomas")
console.log("A" && "B" && "C")
console.log(null || false || "Tomas")

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

We can further simplify our example component by using and, or operators and logical expressions. Let's take a look!
Logical expressions can operate over true or false and truthy and falsy values. The OR operator returns the first truthy value in the chain. In this case, the console prints the truthy value, Tomas, as the null value is falsy.
The AND expression chain returns the last value if all previous values in the chain are truthy. If at least one value is not truthy it returns false. In our case, the null value is falsy, and the expression returns false.
This AND chain returns value "Tomas" as all values in the chain are truthy, so the last value is returned.
Similarly, this AND chain returns value C as values "A" and "B" are truthy.
Last, this OR chain will return value "Tomas" as it is a truthy value, and all the previous falsy values are ignored.

Conditions

/

Logical Chaining

      import React from 'react';

function UserProfile({ userName, userBio, userAge }) {
  return (
    <div>
      <h1>
        { userAge < 18 ? 'Yo, ': 'Welcome, ' }
        { userName || <span>[missing name]</span>}
      </h1>
      { userBio && <p>{userBio}</p> }
    </div>
  );
}

function App() {
  return <>
    <UserProfile userName={undefined} userBio={null} userAge={6} />
    <hr />
    <UserProfile userName="Tomas" userBio="Still Jedi" userAge={44} />
  </>
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

span {
    color: red;
}

Full Stack Development

Conditional Rendering

Conditional Rendering

Introduction

Javascript

Truthy and Falsy

Conditions

Ternary Operator

React Rendering

Truthy and Falsy

Conditions

Null Coalescing

Javcascript

Ternary Operator

Conditions

Ternary Operator

Conditions

Logical Chains

Conditions

Logical Chaining