One place for hosting & domains

      Conditional

      How To Write Conditional Statements in PHP


      The author selected Open Sourcing Mental Illness Ltd to receive a donation as part of the Write for DOnations program.

      Introduction

      Decisions are an integral part of life. From the mundane decisions about what to wear, to the life-altering decisions of jobs and family. So too in development. For a program to do anything useful, it must be able to respond to some sort of input. When a person clicks the contact button on a website, they expect to be taken to a contact page. If nothing happens, or they are taken to the wrong page, the user may choose to stop using that website or company completely.

      Decisions written in code are formed using conditionals: “If x, then y.” Even a button click is a form of condition: “If this button is clicked, go to a certain page.” Conditional statements are part of the logic, decision making, or flow control of a computer program. You can compare a conditional statement to a “Choose Your Own Adventure” book, or a flowchart.

      Let’s look at some examples where we would use conditional statements:

      • If the student receives over 65% on her test, report that her grade passes; if not, report that her grade fails.
      • If there is money in an account, calculate interest; if it is overdrawn, charge a penalty fee.
      • If they buy 10 oranges or more, calculate a discount of 5%; if they buy fewer, then don’t.
      • Check the location of a user and display the correct language based on country.
      • Send a form on submit, or display warnings next to missing required fields.
      • Open a dropdown on a click event, or close a dropdown if it is already open.
      • Display the booking form for a hotel, but not if the hotel is booked.

      When evaluating conditions and assigning code to run based on whether or not those conditions are met, we are writing conditional code.

      This tutorial will start with an overview of the comparison operators that will be used to build conditional statements. Next, it will take you through writing conditional statements in PHP, including the if, else, and elseif keywords. This also includes combining conditions using the logical operators of and or or. Finally it will also cover some special conditional operators to more precisely describe a situation.

      Overview of Comparison Operators

      A conditional statement evaluates whether a condition is true or false. This is most often the result of comparing two values. Comparison operators are used, as their name implies, to compare two values. PHP is a loosely typed language, which means, by default, PHP will attempt to change a data type to match an expected result when possible. This is called type juggling, and becomes very important when using comparison operators. As an example, all of the following values would be considered equal even though they are of different types:

      false
      0
      0.0
      ''
      

      PHP provides several comparison operators to express the desired comparison of both value and type/value combined:

      • Equal == in value, after type juggling, meaning all of the values in the previous code block are equal.

      • Identical === in both type and value, meaning none of the previous values are identical, because they are all of different types.

      • Not Equal != or <> in value, after type juggling. As the opposite of equal, comparing false != 0 would evaluate as false because the values match.

      • Not Identical !== in both type and value. Comparing false !== 0 would evaluate to true because although the values evaluate the same, the type is different.

      Note: Pay special attention to the exclamation point !, which functions to negate other conditions.

      Besides equal and identical, PHP also provides comparison operators to express how the values relate to one another.

      • Less than < is used to show that 5 < 6 is true.

      • Greater than > is used to show that 5 > 4 is true.

      • Less than or equal to <= is used so show that both 5 <= 5 and 5 <= 6 are true.

      • Greater than or equal to >= is used to show that both 5 >= 5 and 5 >= 4 are true.

      Now that we know what the comparison operators are, we can look at how to use them to write conditional statements.

      Writing Conditional Statements

      Comparison operators are used in combination with the if, else, and elseif keywords to build conditional statements that control the flow of a program.

      Using if Statements

      When we wish to execute a specific piece of code only when a condition is met, we use the conditional if statement, followed by the condition in parentheses (), followed by the code to execute within curly braces {}. The code within the conditional statement will only be executed if the condition evaluates to true. When the condition is not true, the code within the conditional statement is ignored and processing continues after the close of the conditional statement. Let’s see how this would look in code:

      if ($inventory > 0) {
          echo "Add to Cart";
      }
      

      The string “Add to Cart” will only be displayed when the variable $inventory contains a number greater than 0.

      Alternately, if there is only a single expression after the condition, PHP allows us to leave off the curly braces entirely. PHP will execute the first expression after a condition, ending in a semicolon. This includes any whitespace between them. The following evaluates the same way as the previous example:

      if ($inventory > 0) echo "Add to Cart";
      

      Using an else Block

      When we wish to execute either one specific piece of code or another, we add an else block to the conditional if statement. The code within the if block will only be executed if the statement evaluates to true, while the code within the else bock will only be executed when the statement is not true. Let’s take a look at an example where shoppers are given a discount if they purchase 10 or more items:

      if (count($cart) >= 10) {
          $discount = $subtotal * .3;
      } else {
          $discount = 0;
      }
      

      When the number of items in the cart is greater than or equal to 10, the statement evaluates to true, and a discount of 30% is calculated, based on the $subtotal. When the number of items in the cart is less than 10, the statement evaluates to false and the else block is executed, which gives no discount. The comparison could also be written as count($cart) > 9.

      Note: You cannot use the percent sign % when calculating the percent, because % is used to calculate the modulo, which is the remainder of $a divided by $b: 3 % 8 = 2. Instead, to calculate a percent, convert the percentage to a decimal by dividing it by 100. So 30% is 30/100, or 0.30, or 0.3. For more, check out How to Work with Numbers in PHP.

      Adding an else block can sometime make code more confusing. It’s worth considering whether or not we can accomplish the same thing without the else block. For example, the previous conditional could also be written as follows:

      $discount = 0;
      if (count($cart) >= 10) {
          $discount = $subtotal * .3;
      }
      

      We set a default value of 0 for the discount and only change it when the condition is met.

      Writing an elseif Statement

      When a second condition is needed, you could add a second conditional statement:

      $discount = 0;
      if (count($cart) >= 5) {
          $discount = $subtotal * .15
      }
      if (count($cart) >= 10) {
          $discount = $subtotal * .3;
      }
      

      When adding a second statement in this way, PHP must check each statement, even if the first statement has been matched. If there are 14 items in the cart, the first conditional statement would evaluate to true, because 14 is greater than or equal to 5, which would set the discount to 15%. After that, the second conditional statement would also evaluate to true, because 14 is also greater than or equal to 10, once again setting the discount which overrides the value to 30%.

      This could also end up returning the wrong discount if the conditions are not in the correct order. When there is the possibility of matching multiple conditions, it’s a good idea to double check that you are evaluating those conditions in the correct order.

      The code could be clarified and evaluated more cleanly by using the elseif block:

      $discount = 0;
      if (count($cart) >= 10) {
          $discount = $subtotal * .3;
      } elseif (count($cart) >= 5) {
          $discount = $subtotal * .15
      }
      

      In this case, the code first checks for a value greater than or qual to 10. If this first statement evaluates to true, the code within the first conditional block is executed and the other conditional statements are never evaluated. Only when the first condition is not met is the next condition evaluated.

      A conditional statement may have any number of elseif conditions, but only a single else.

      Nested Conditional Statements

      Like nesting dolls, conditional statements may contain other conditional statements “nested” within them. When nesting conditional statements, using consistent indentation helps tremendously with readability. Let’s expand upon our discounts to give more options:

      $discount = 0;
      if ($country === 'USA') {
          if (count($cart) >= 10) {
              if ($coupon_discount > .3) {
                  $discount = $subtotal * $coupon_discount;
              } else {
                  $discount = $subtotal * .3;
              }
          } elseif (count($cart) >= 5) {
              if ($coupon_discount > .15) {
                  $discount = $subtotal * $coupon_discount;
              } else {
                  $discount = $subtotal * .15
              }
          }
      }
      

      In this example, the discounts are only available for those in the US, so before we check for any discount, we first verify that the $country variable is set to USA. The rest of the conditionals will only be reached if that first condition is true.

      Next we check if the number of items in the cart is greater than or equal to 10. If this second condition is true, then we check if the value of a $coupon_discount is greater than the normal 30% discount for ordering 10 or more items. If this third condition is true, then use the $coupon_discount to calculate the $discount. Otherwise, this third condition is false, then use the normal 30% to calculate the discount.

      This brings us to the else block of the second condition. Instead of just else, the elseif block is used to verify that the number of items in the cart is greater than or equal to 5 before giving the option for a secondary discount. Once again we check for a value in the $coupon_discount variable that is greater than the secondary volume discount of 15%. If this fourth condition is true, the $coupon_discount is used to calculate the $discount. Otherwise, this fourth condition is false, then we reach the last discount of 15%.

      Nested conditional statements, like the one we just looked at, can be hard to follow, especially if you start adding additional levels. When possible, consider how you might rewrite a conditional statement to remove nesting. The previous condition could also be written as follows:

      $discount = 0;
      if ($country !== 'USA') {
          // no discount for non-us locations
      } elseif ($coupon_discount > .3) {
          $discount = $subtotal * $coupon_discount;
      } elseif (count($cart) >= 10) {
          $discount = $subtotal * .3;
      } elseif ($coupon_discount > .15) {
          $discount = $subtotal * $coupon_discount;
      } elseif (count($cart) >= 5) {
          $discount = $subtotal * .15;
      }
      

      Because PHP allows an empty conditional block, we can check for country first and skip any other conditions. Take careful note of the negative expression !== meaning that the country does not match the value USA. Although you can leave a block completely empty, adding a comment explains the intention to leave that block empty.

      For the elseif blocks, we start with the most restrictive and work our way down. Someone in the USA with a coupon worth 20% (.2) would have the first 3 blocks evaluate to false. Then they would reach the third elseif, which would evaluate to true because .2 is greater than .15. The discount would be calculated and the final condition block would be passed over.

      Alternative Syntax

      The most common syntax for conditional statements is using curly braces, as the previous examples showed. PHP does provide an alternative syntax which can make things easier to read when there are long blocks of code between each conditional, or when a loop, which also uses curly braces, is used within a conditional. This alternative syntax is written using colons after the conditional statement and finalizing the conditional block with an endif; statement. The discount example could be written with this alternative syntax as follows:

      $discount = 0;
      if ($country !== 'USA'):
          // no discount for non-us locations
      elseif ($coupon_discount > .3):
          $discount = $subtotal * $coupon_discount;
      elseif (count($cart) >= 10):
          $discount = $subtotal * .3;
      elseif ($coupon_discount > .15):
          $discount = $subtotal * $coupon_discount;
      elseif (count($cart) >= 5):
          $discount = $subtotal * .15;
      else:
          $discount = $subtotal * .05;
      endif;
      

      While nesting a loop within these conditional blocks is acceptable, nesting curly brace conditionals within these conditional blocks may lead to unexpected results. It’s best to stick with either curly braces or colons.

      Note: Because of the way PHP handles whitespace, it will accept spaces between else and if when using curly braces: } else if (...){. However, PHP will fail with a parse error if you use a space when using a colon to define your statement: elseif (...):. In practice, it’s a good idea to avoid spaces and always write this as the single elseif.

      Additional Comparisons Operators

      Using a single comparison operator in each conditional statement is not the only way to use comparison operators. Not only can we combine conditions, we can also use comparison operators outside of a conditional.

      Combining Conditions Using Logical Operators

      When there are multiple conditions that both need to be true, or multiple conditions which would have the same affect, the conditional statements may be combined into a single block using Logical Operators.

      • And and says that both conditions must be true.

      • Or or says that either condition is true or they could both be true.

      • Xor xor says that only one of the conditions is true.

      • Not ! is used to negate a condition, which changes it from evaluating true to evaluating false.

      • And && says that both conditions must be true.

      • Or || says that either condition is true or they could both be true.

      The reason for the two different variations of and and or operators is that they operate at different precedences. The precedence of an operator specifies how “tightly” it binds two expressions together, or in what order the operations are evaluated. (See Documentation for Operator Precedence.) Either way is perfectly acceptable and works the same in most situations. Operators in PHP are case-insensitive, meaning the operator could also be written as OR (or even Or or oR, neither of which would I recommend). To minimize confusion, the most important thing is to be consistent in whichever you choose. I’ll be using and and or in the examples because they are more natural to read.

      Using this in the discount example: To check that both the $country variable is set to USA and that the items in the cart are greater than or equal to 10, those conditions can be combined using the and operator:

      $discount = 0;
      if ($country === 'USA' and count($cart) >= 10) {
          $discount = $subtotal * .3;
      }
      

      The example has two conditions $country === 'USA' and count($cart) >= 10. If either of these conditions evaluates to true, the code within that block will be executed. This example used the and operator, but it could also have used AND or even the && operator with the exact same results.

      We can also combine conditions that would have to same result. If having 10 or more items in the cart produces a discount of 30%, or having a subtotal of $100 or more would also produce a discount of 30%, these conditionals could be combined:

      $discount = 0;
      if (count($cart) >= 10 or $subtotal >= 100) {
          $discount = $subtotal * .3;
      }
      

      More than two conditions can also be combined; however, be extra cautious in their use. Let’s try to combine the country evaluation along with the cart count and subtotal comparison:

      # BAD
      $discount = 0;
      if ($country === 'USA' and count($cart) >= 10 or $subtotal >= 100) {
          $discount = $subtotal * .3;
      }
      

      This example doesn’t actually work the way it was intended because the country is evaluated with the count of the cart first, then that result is evaluated against the subtotal comparison using or. This means that no matter what the country or count values, if $subtotal is greater than or equal to 100, the full conditional statement will evaluate to true.

      Parentheses can be used to make sure that the conditions are evaluated in the intended order:

      $discount = 0;
      if ($country === 'USA' and (count($cart) >= 10 or $subtotal >= 100)) {
          $discount = $subtotal * .3;
      }
      

      Now the cart count is evaluated with the subtotal comparison before the country is evaluated with that result. This provides the desired outcome of requiring $country to have the value of USA and then either the count of the cart or the comparison of the subtotal (or both) must also evaluate to true.

      Sometime an entire conditional block is not required to compare two values. PHP provides a few shorthand comparison operators to more precisely describe a situation.

      Ternary Operator

      When there should be one result if an expression is true and another result if that same expression is false, a ternary operator can be used. The expression (expr1) ? (expr2) : (expr3) evaluates to expr2 if expr1 evaluates to true, and expr3 if expr1 evaluates to false. Let’s say that the username of a visitor should be shown if they are logged in, while the word “Guest” should be displayed if not. The function isset will help us to evaluate this condition because it will check that a variable has actually been defined. If the variable is defined, isset returns true; if not, isset returns false:

      echo (isset($username)) ? 'Guest' : $username;
      

      This is identical to this if/else statement:

      if (isset($username)) {
          echo 'Guest';
      } else {
          echo $username;
      }
      

      It is possible to leave out the middle part of the ternary operator. The expression expr1 ?: expr3 returns expr1 if expr1 evaluates to true, and expr3 otherwise. To show either the username or the word “Guest”, the ternary operator would look something like:

      echo $username ?: 'Guest';
      

      This works if $username is set to an empty string, but if $username is not set at all, we get an error. The isset function cannot be used in this situation, because the output of isset($username) would either be true or false, instead of the value of $username. This brings us to our next operator.

      Null Coalescing Operator

      The null coalescing operator (??) has been added as “syntactic sugar” (sweet to have but not required) for the common case of needing to use a ternary in conjunction with isset(). It returns its first operand if it exists and is not null; otherwise it returns its second operand. To show either the username or the word “Guest”, the null coalescing operator is used:

      echo $username ?? 'Guest';
      

      Spaceship Operator

      The spaceship operator (<=>) is used for comparing two expressions: $a <=> $b. It returns -1, 0, or 1 when $a is respectively less than (<), equal to (=), or greater than (>) $b:

      echo 1 <=> 1; // 0
      echo 1 <=> 2; // -1
      echo 2 <=> 1; // 1
      

      Warning: Although the spaceship operator is not used often, it comes in very handy when writing a “user defined sort” (usort) function. The following example includes additional concepts you may not be familiar with yet. Don’t worry if you don’t follow all of the code right now. I’ll explain what’s going on in the example, and we’ll cover these concepts in more depth in a later tutorial.

      Let’s create an array of new products. Each product in the array will, in turn, be its own nested array of product attributes:

      $products = [
          ['name'=>'Flippers', 'price'=>7.99],
          ['name'=>'Wet Suit', 'price'=>18.99),
          ['name'=>'Snorkel', 'price'=>2.99),
          ['name'=>'Mask', 'price'=>6.99),
      ];
      

      Now let’s say we want to sort this $products array by the price of each item, in descending order. We can do this by using the usort function, into which we then pass an anonymous function which handles the sorting logic. Let’s look at the code:

      usort($products, function($item1, $item2) {
          return $item2["price"] <=> $item1["price"];
      });
      

      The usort function is taking two arguments (the values passed to a function). The first argument is the $products array. The second is an anonymous function which tells the usort function what to do with each item in the array. If the price of $item2 is less than the price of $item1, the operator will return -1, which will move $item2 before $item1. If the prices are the same, the operator will return 0, which will keep the items in the same order. Finally, if the price of $item2 is greater than the price of $item1, the operator will return 1, which will put $item2 after $item1, which again is the same order in which they started.

      To sort by price in ascending order instead, we flip the position of $item1 and $item2, which changes the order of the comparison:

      usort($products, function($item1, $item2) {
          return $item1["price"] <=> $item2["price"];
      });
      

      Conclusion

      Conditional statements provide us with flow control to determine the output choices of our programs. They are one of the foundational building blocks of programming, and can be found in virtually all programming languages.

      This tutorial covered both comparison operators for comparing values and logical operators for combining conditions. It demonstrated the use of the if, else, and elseif keywords while looking at nested statements and combining conditions. Finally it introduced the use of additional comparison operators, including the ternary operator, null coalescing operator, and the spaceship operator. To continue practicing conditional statements:

      • Try using different operators: <, >, ==, ===
      • Combine operators with and or or
      • Recreate an if statement using a ternary, null coalescing, or spaceship operator

      For more information on how to code in PHP, check out other tutorials in the How To Code in PHP series.



      Source link

      7 Ways to Implement Conditional Rendering in React Applications


      Introduction

      With React, we can build Single Page Applications that are dynamic and highly interactive. One way we fully utilize such interactivity is through conditional rendering.

      Conditional rendering as a term describes the ability to render different UI markup based on certain conditions. In React-speak, it is a way to render different elements or components based on a condition. This concept is applied often in the following scenarios:

      • Rendering external data from an API
      • Showing/hiding elements
      • Toggling application functionality
      • Implementing permission levels
      • Authentication and Authorization

      In this article, we examine seven(7) ways to implement such conditional rendering in React applications.

      The Challenge

      As a challenge, based on the value of isLoggedIn in our component state, we want to be able to display a Login button if the user isn’t logged in, and a Logout button if he/she is.

      This is what our starter component looks like:

      Visually:

      Code:

      import React, { Component } from "react";
      import ReactDOM from "react-dom";
      import "./styles.css";
      
      
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            isLoggedIn: true
          };
        }
        render() {
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              <button>Login</button>
              <button>Logout</button>
            </div>
          );
        }
      }
      
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<App />, rootElement);
      

      Bear in mind that within the code snippets implies that some code which isn’t directly connected with the point being explained goes there.

      1. Using an If…else Statement

      An if…else statement allows us to specify that a particular action be carried out if a condition evaluates to true as well as do something else if it doesn’t. Using the sample project, we will examine two ways if…else conditions may be used to implement conditional rendering in React.

      In JSX, we are able to mix up JavaScript code with our markup to ensure stunning interactivity within our application. To do this we use a set of curly braces {} and write our JavaScript within. The caveat however is that there is a limit to what can be done within such braces. As a result the code snippet below would fail to achieve the desired result.

      // index.js
      ...
      render() {
          let {isLoggedIn} = this.state;
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {
                if(isLoggedIn){
                  return <button>Logout</button>
                } else{
                  return <button>Login</button>
                }
              }
            </div>
          );
      }
      ...
      

      To understand more about this behavior, visit this link.

      To solve this, we extract the conditional logic into a function as shown below:

      // index.js
      ...
      render() {
          let {isLoggedIn} = this.state;
          const renderAuthButton = ()=>{
            if(isLoggedIn){
              return <button>Logout</button>
            } else{
              return <button>Login</button>
            }
          }
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {renderAuthButton()}
            </div>
          );
        }
      ...
      

      Notice that we extract the logic from JSX into a function renderAuthButton. Thus, we only need to execute the function within the JSX curly braces.

      Multiple return statements

      In using this method, the component must be kept as simple as possible to avoid a wasted re-render of sibling or parent components. As a result of this, we create a new functional component called AuthButton.

      // AuthButton.js
      
      import React from "react";
      
      const AuthButton = props => {
        let { isLoggedIn } = props;
        if (isLoggedIn) {
          return <button>Logout</button>;
        } else {
          return <button>Login</button>;
        }
      };
      export default AuthButton;
      

      AuthButton returns various elements/components depending on the value of state that is passed down via the isLoggedIn props. Thus we import it in our index.js and pass down the appropriate state as shown below:

      // index.js
      ...
      import AuthButton from "./AuthButton";
      
      ...
        render() {
          let { isLoggedIn } = this.state;
          return (
            <div className="App">
            ...
              <AuthButton isLoggedIn={isLoggedIn} />
            </div>
          );
        }
      ...
      

      You must avoid doing this:

      // index.js
      ...
      render() {
          let { isLoggedIn } = this.state;
          if (isLoggedIn) {
            return (
              <div className="App">
                <h1>
                  This is a Demo showing several ways to implement Conditional
                  Rendering in React.
                </h1>
                <button>Logout</button>;
              </div>
            );
          } else {
            return (
              <div className="App">
                <h1>
                  This is a Demo showing several ways to implement Conditional
                  Rendering in React.
                </h1>
                <button>Login</button>
              </div>
            );
          }
        }
      }
      ...
      

      The snippet above would achieve the same result but bloat the component unnecessarily while introducing performance issues as a result of constantly re-rendering an unchanging component.

      2. Using Element Variables

      Element variables are an extension of **Extracting the conditional rendering into a function** as shown above. Element variables are simply variables that hold JSX elements. Thus we can conditionally assign elements/ components to these variables outside our JSX and only render the variable within JSX. See demo below:

      // index.js
      ...
      render() {
          let { isLoggedIn } = this.state;
          let AuthButton;
          if (isLoggedIn) {
            AuthButton = <button>Logout</button>;
          } else {
            AuthButton = <button>Login</button>;
          }
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {AuthButton}
            </div>
          );
        }
      ...
      

      Notice how we conditionally assign values(components) to AuthButton and then we only have to render it neatly within our JSX.

      3. Using a Switch Statement

      As shown previously, we can conditionally return different markup from a component based on set conditions using an if…else statement. The same could be achieved with a switch statement where we can specify the markup for various conditions. See example below:

      // AuthButton.js
      import React from "react";
      
      const AuthButton = props => {
        let { isLoggedIn } = props;
        switch (isLoggedIn) {
          case true:
            return <button>Logout</button>;
            break;
          case false:
            return <button>Login</button>;
            break;
          default:
            return null;
        }
      };
      export default AuthButton;
      

      Notice how we return various buttons based on the value of isLoggedIn. It is more reasonable to apply this method when there’s more than two possible values or outcomes. You may also do away with the break statement as the return statement automatically terminates the execution.

      Note: Returning **null** from a component will cause it to hide itself/display nothing. This a good way to toggle visibility of components.

      4. Ternary Operators

      The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

      If you are familiar with ternary operators, then you are aware that is is simply a more concise way to write an if statement. Thus we have:

      // index.js
      ...
      render() {
          let { isLoggedIn } = this.state;
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
            </div>
          );
        }
      ...
      

      In cases where, this approach makes the component bloated, bulky or less readable, you may encapsualte the conditional within a functional component as shown below:

      // AuthButton.js
      import React from "react";
      
      const AuthButton = props => {
        let { isLoggedIn } = props;
        return isLoggedIn ? <button>Logout</button> : <button>Login</button>;
      };
      
      export default AuthButton;
      

      5. Logical && (Short Circuit Evaluation with &&)

      Short circuit evaluation is a technique used to ensure that there are no side effects during the evaluation of eperands in an expression. The logical && helps us specify that an action should be taken only on one condition, otherwise, it would be ignored entirely. This is useful for situations where you only need to take an action when a certain condition is true, otherwise do nothing.

      For instance if we only needed to show the Logout button if the person is logged in, otherwise we do nothing. We’d have something like this:

      // index.js
      ...
      render() {
          let { isLoggedIn } = this.state;
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {isLoggedIn && <button>Logout</button>}
            </div>
          );
        }
      ...
      

      This would display the logout button if isLoggedIn is true otherwise it’d display nothing. We could adapt this to fit our use case as shown below. However, it is not advisable.

      // index.js
      ...
      return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {isLoggedIn && <button>Logout</button>}
              {!isLoggedIn && <button>Login</button>}
            </div>
          );
        }
      ...
      

      This would render the right button based on the value of isLoggedIn. However, this isn’t recommended as there are better, cleaner ways to achieve the same effect. Also this could easily make your code look messy and unintuitive once the component gets slightly larger.

      Earlier we covered that JSX limitations make it unable to execute every type of JavaScript code. This isn’t entirely true as there are ways to bypass such behavior. One such way is by using IIFEs.

      An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. It’s used in the format below.

      (function () {
          statements
      })();
      

      You may learn more about IIFE’s from MDN here.

      With this technique, we are able to to write conditional logic directly within JSX but wrapped within an anonymous function that is immediately invoked on evaluation of that portion of our code. See example below:

      //index.js
      ...
      render() {
          let { isLoggedIn } = this.state;
          return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {(function() {
                if (isLoggedIn) {
                  return <button>Logout</button>;
                } else {
                  return <button>Login</button>;
                }
              })()}
            </div>
          );
        }
      ...
      

      This can also be written in a slightly more concise manner using an arrow function as shown below:

      // index.js
      ...
      return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              {(()=> {
                if (isLoggedIn) {
                  return <button>Logout</button>;
                } else {
                  return <button>Login</button>;
                }
              })()}
            </div>
          );
        }
      ...
      

      7. Using Enhanced JSX

      Certain libaries expose functionality to extend JSX, thus making it possible to implement conditional rendering directly with JSX. One of such libraries is JSX Control Statements. It is a Babel plugin that transforms component-like control statements into their JavaScript counterparts during transpilation. See example below for how this may be implemented.

      // index.js
      ...
      return (
            <div className="App">
              <h1>
                This is a Demo showing several ways to implement Conditional Rendering
                in React.
              </h1>
              <Choose>
                <When condition={isLoggedIn}>
                   <button>Logout</button>;
                </When>
                <When condition={!isLoggedIn}>
                   <button>Login</button>;
                </When>
              </Choose>
            </div>
          );
        }
      ...
      

      This approach is however not recommended as the code you write is eventually transpiled to a regular JavaScript conditional. It is probably always better to just write JavaScript than add an extra dependency over something so trivial.

      Performance Concerns

      As a general rule, it is best to ensure that in implemementing conditional rendering you:

      • Do not change the position of components arbitrarily in order to prevent components from unmounting and remounting unnecessarily.
      • Change only the markup that is concerned with the conditional rendering and leave out every other unchanging bit of the component.
      • Do not bloat your component unnecessarily within the render method, thus causing components to delay in rendering.

      For more on writing high performing conditionals in React, see this article by Cole Williams.

      Conclusion

      We have successfully examined 7 ways to implement conditional rendering in React. Each method has it’s own advantage and the choice of which to use is mostly dependent on the use case. Things to consider include:

      • The size of markup to be rendered conditionally
      • The number of possible outcomes
      • Which would be more intuitive and readable

      Generally, keep in mind the following recommendations:

      • When there is only one expected outcome, the Logical && Operator comes in very handy.
      • For boolean situations or use cases with only 2 possible outcomes, you may use If…else, Element variables, Ternary Operators and IIFEs.
      • For cases of more than 2 outcomes, you may use a Switch statement, an extracted function or extracted functional component.

      This is however merely a recommendation and the choice of which to go with is primarily yours.

      Further Reading

      You may learn more via the following resources:



      Source link

      How To Write Conditional Statements in Go


      Introduction

      Conditional statements are part of every programming language. With conditional statements, we can have code that sometimes runs and at other times does not run, depending on the conditions of the program at that time.

      When we fully execute each statement of a program, we are not asking the program to evaluate specific conditions. By using conditional statements, programs can determine whether certain conditions are being met and then be told what to do next.

      Let’s look at some examples where we would use conditional statements:

      • If the student receives over 65% on her test, report that her grade passes; if not, report that her grade fails.
      • If he has money in his account, calculate interest; if he doesn’t, charge a penalty fee.
      • If they buy 10 oranges or more, calculate a discount of 5%; if they buy fewer, then don’t.

      Through evaluating conditions and assigning code to run based on whether or not those conditions are met, we are writing conditional code.

      This tutorial will take you through writing conditional statements in the Go programming language.

      If Statements

      We will start with the if statement, which will evaluate whether a statement is true or false, and run code only in the case that the statement is true.

      In a plain text editor, open a file and write the following code:

      grade.go

      package main
      
      import "fmt"
      
      func main() {
          grade := 70
      
          if grade >= 65 {
              fmt.Println("Passing grade")
          }
      }
      

      With this code, we have the variable grade and are giving it the integer value of 70. We are then using the if statement to evaluate whether or not the variable grade is greater than or equal ( >= ) to 65. If it does meet this condition, we are telling the program to print out the string Passing grade.

      Save the program as grade.go and run it in a local programming environment from a terminal window with the command go run grade.go.

      In this case, the grade of 70 does meet the condition of being greater than or equal to 65, so you will receive the following output once you run the program:

      Output

      Passing grade

      Let’s now change the result of this program by changing the value of the grade variable to 60:

      grade.go

      package main
      
      import "fmt"
      
      func main() {
          grade := 60
      
          if grade >= 65 {
              fmt.Println("Passing grade")
          }
      }
      

      When we save and run this code, we will receive no output because the condition was not met and we did not tell the program to execute another statement.

      To give one more example, let us calculate whether a bank account balance is below 0. Let’s create a file called account.go and write the following program:

      account.go

      package main
      
      import "fmt"
      
      func main() {
          balance := -5
      
          if balance < 0 {
              fmt.Println("Balance is below 0, add funds now or you will be charged a penalty.")
          }
      }
      

      When we run the program with go run account.go, we’ll receive the following output:

      Output

      Balance is below 0, add funds now or you will be charged a penalty.

      In the program we initialized the variable balance with the value of -5, which is less than 0. Since the balance met the condition of the if statement (balance < 0), once we save and run the code, we will receive the string output. Again, if we change the balance to 0 or a positive number, we will receive no output.

      Else Statements

      It is likely that we will want the program to do something even when an if statement evaluates to false. In our grade example, we will want output whether the grade is passing or failing.

      To do this, we will add an else statement to the grade condition above that is constructed like this:

      grade.go

      package main
      
      import "fmt"
      
      func main() {
          grade := 60
      
          if grade >= 65 {
              fmt.Println("Passing grade")
          } else {
              fmt.Println("Failing grade")
          }
      }
      

      Since the grade variable has the value of 60, the if statement evaluates as false, so the program will not print out Passing grade. The else statement that follows tells the program to do something anyway.

      When we save and run the program, we’ll receive the following output:

      Output

      Failing grade

      If we then rewrite the program to give the grade a value of 65 or higher, we will instead receive the output Passing grade.

      To add an else statement to the bank account example, we rewrite the code like this:

      account.go

      package main
      
      import "fmt"
      
      func main() {
          balance := 522
      
          if balance < 0 {
              fmt.Println("Balance is below 0, add funds now or you will be charged a penalty.")
          } else {
              fmt.Println("Your balance is 0 or above.")
          }
      }
      

      Output

      Your balance is 0 or above.

      Here, we changed the balance variable value to a positive number so that the else statement will print. To get the first if statement to print, we can rewrite the value to a negative number.

      By combining an if statement with an else statement, you are constructing a two-part conditional statement that will tell the computer to execute certain code whether or not the if condition is met.

      Else if Statements

      So far, we have presented a Boolean option for conditional statements, with each if statement evaluating to either true or false. In many cases, we will want a program that evaluates more than two possible outcomes. For this, we will use an else if statement, which is written in Go as else if. The else if or else if statement looks like the if statement and will evaluate another condition.

      In the bank account program, we may want to have three discrete outputs for three different situations:

      • The balance is below 0
      • The balance is equal to 0
      • The balance is above 0

      The else if statement will be placed between the if statement and the else statement as follows:

      account.go

      package main
      
      import "fmt"
      
      func main() {
          balance := 522
      
          if balance < 0 {
              fmt.Println("Balance is below 0, add funds now or you will be charged a penalty.")
          } else if balance == 0 {
              fmt.Println("Balance is equal to 0, add funds soon.")
          } else {
              fmt.Println("Your balance is 0 or above.")
          }
      }
      

      Now, there are three possible outputs that can occur once we run the program:

      • If the variable balance is equal to 0 we will receive the output from the else if statement (Balance is equal to 0, add funds soon.)
      • If the variable balance is set to a positive number, we will receive the output from the else statement (Your balance is 0 or above.).
      • If the variable balance is set to a negative number, the output will be the string from the if statement (Balance is below 0, add funds now or you will be charged a penalty).

      What if we want to have more than three possibilities, though? We can do this by writing more than one else if statement into our code.

      In the grade.go program, let’s rewrite the code so that there are a few letter grades corresponding to ranges of numerical grades:

      • 90 or above is equivalent to an A grade
      • 80-89 is equivalent to a B grade
      • 70-79 is equivalent to a C grade
      • 65-69 is equivalent to a D grade
      • 64 or below is equivalent to an F grade

      To run this code, we will need one if statement, three else if statements, and an else statement that will handle all failing cases.

      Let’s rewrite the code from the preceding example to have strings that print out each of the letter grades. We can keep our else statement the same.

      grade.go

      package main
      
      import "fmt"
      
      func main() {
          grade := 60
      
          if grade >= 90 {
              fmt.Println("A grade")
          } else if grade >= 80 {
              fmt.Println("B grade")
          } else if grade >= 70 {
              fmt.Println("C grade")
          } else if grade >= 65 {
              fmt.Println("D grade")
          } else {
              fmt.Println("Failing grade")
          }
      }
      

      Since else if statements will evaluate in order, we can keep our statements pretty basic. This program is completing the following steps:

      1. If the grade is greater than 90, the program will print A grade, if the grade is less than 90, the program will continue to the next statement…

      2. If the grade is greater than or equal to 80, the program will print B grade, if the grade is 79 or less, the program will continue to the next statement…

      3. If the grade is greater than or equal to 70, the program will print C grade, if the grade is 69 or less, the program will continue to the next statement…

      4. If the grade is greater than or equal to 65, the program will print D grade, if the grade is 64 or less, the program will continue to the next statement…

      5. The program will print Failing grade because all of the above conditions were not met.

      Nested If Statements

      Once you are feeling comfortable with the if, else if, and else statements, you can move on to nested conditional statements. We can use nested if statements for situations where we want to check for a secondary condition if the first condition executes as true. For this, we can have an if-else statement inside of another if-else statement. Let’s look at the syntax of a nested if statement:

      if statement1 { // outer if statement
          fmt.Println("true")
      
          if nested_statement { // nested if statement
              fmt.Println("yes")
          } else { // nested else statement
              fmt.Println("no")
          }
      
      } else { // outer else statement
          fmt.Println("false")
      }
      

      A few possible outputs can result from this code:

      • If statement1 evaluates to true, the program will then evaluate whether the nested_statement also evaluates to true. If both cases are true, the output will be:

      Output

      true yes
      • If, however, statement1 evaluates to true, but nested_statement evaluates to false, then the output will be:

      Output

      true no
      • And if statement1 evaluates to false, the nested if-else statement will not run, so the else statement will run alone, and the output will be:

      Output

      false

      We can also have multiple if statements nested throughout our code:

      if statement1 { // outer if
          fmt.Println("hello world")
      
          if nested_statement1 { // first nested if
              fmt.Println("yes")
      
          } else if nested_statement2 { // first nested else if
              fmt.Println("maybe")
      
          } else { // first nested else
              fmt.Println("no")
          }
      
      } else if statement2 { // outer else if
          fmt.Println("hello galaxy")
      
          if nested_statement3 { // second nested if
              fmt.Println("yes")
          } else if nested_statement4 { // second nested else if
              fmt.Println("maybe")
          } else { // second nested else
              fmt.Println("no")
          }
      
      } else { // outer else
          statement("hello universe")
      }
      

      In this code, there is a nested if statement inside each if statement in addition to the else if statement. This will allow for more options within each condition.

      Let’s look at an example of nested if statements with our grade.go program. We can check for whether a grade is passing first (greater than or equal to 65%), then evaluate which letter grade the numerical grade should be equivalent to. If the grade is not passing, though, we do not need to run through the letter grades, and instead can have the program report that the grade is failing. Our modified code with the nested if statement will look like this:

      grade.go

      
      package main
      
      import "fmt"
      
      func main() {
          grade := 92
          if grade >= 65 {
              fmt.Print("Passing grade of: ")
      
              if grade >= 90 {
                  fmt.Println("A")
      
              } else if grade >= 80 {
                  fmt.Println("B")
      
              } else if grade >= 70 {
                  fmt.Println("C")
      
              } else if grade >= 65 {
                  fmt.Println("D")
              }
      
          } else {
              fmt.Println("Failing grade")
          }
      }
      

      If we run the code with the variable grade set to the integer value 92, the first condition is met, and the program will print out Passing grade of:. Next, it will check to see if the grade is greater than or equal to 90, and since this condition is also met, it will print out A.

      If we run the code with the grade variable set to 60, then the first condition is not met, so the program will skip the nested if statements and move down to the else statement, with the program printing out Failing grade.

      We can of course add even more options to this, and use a second layer of nested if statements. Perhaps we will want to evaluate for grades of A+, A and A- separately. We can do so by first checking if the grade is passing, then checking to see if the grade is 90 or above, then checking to see if the grade is over 96 for an A+:

      grade.go

      …
      if grade >= 65 {
          fmt.Print("Passing grade of: ")
      
          if grade >= 90 {
              if grade > 96 {
                  fmt.Println("A+")
      
              } else if grade > 93 && grade <= 96 {
                  fmt.Println("A")
      
              } else {
                  fmt.Println("A-")
              }
      …
      

      In this code, for a grade variable set to 96, the program will run the following:

      1. Check if the grade is greater than or equal to 65 (true)
      2. Print out Passing grade of:
      3. Check if the grade is greater than or equal to 90 (true)
      4. Check if the grade is greater than 96 (false)
      5. Check if the grade is greater than 93 and also less than or equal to 96 (true)
      6. Print A
      7. Leave these nested conditional statements and continue with remaining code

      The output of the program for a grade of 96 therefore looks like this:

      Output

      Passing grade of: A

      Nested if statements can provide the opportunity to add several specific levels of conditions to your code.

      Conclusion

      By using conditional statements like the if statement, you will have greater control over what your program executes. Conditional statements tell the program to evaluate whether a certain condition is being met. If the condition is met it will execute specific code, but if it is not met the program will continue to move down to other code.

      To continue practicing conditional statements, try using different operators to gain more familiarity with conditional statements.



      Source link