React Conditional Rendering with the Tenary Operator % AND Operator

If you want components display different things depending on different conditions, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operator

 

Conditionally returning JSX

 

Let's say you have a PackingList component rendering serveral items, which can be marked as packed or not.

 

You can write this as an if/else statement like so:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

Conditionally returning nothing with null

 

In some situations, you won't want to render anything at all. But a component must return something. In this case, you can return null:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

 

Conditional ternary operator(? : )

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

 

Logical AND operator(&&)

 

Another common shortcut you’ll encounter is the JavaScript logical AND (&&) operator. Inside React components, it often comes up when you want to render some JSX when the condition is true, or render nothing otherwise. With &&, you could conditionally render the checkmark only if isPacked is true:

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

 

Example1

 

App.jsx

import React from "react";
import Login from "./Login";

var isLoggedIn = true;

const currentTime = new Date(2019, 11, 1, 9).getHours();
console.log(currentTime);

function App() {
  return (
    <div className="container">
      {/*Ternary Operator*/}
      {isLoggedIn ? <h1>Hello</h1> : <Login />}
      {/*AND Operator*/}
      {currentTime > 12 /*Condition*/ && <h1>Why are you still working?</h1> /*Expression*/}
    </div>
  );
}

export default App;

 

input.jsx

import React from "react";

function Input(props) {
  return <input type={props.type} placeholder={props.placeholder} />;
}

export default Input;

 

Login.jsx

import React from "react";
import Input from "./Input";

function Login() {
  return (
    <form className="form">
      <Input type="text" placeholder="Username" />
      <Input type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

 

Example2

 

App.jsx

import React from "react";
import Form from "./Form";

var userIsRegistered = true;

function App() {
  return (
    <div className="container">
      <Form isRegistered={userIsRegistered} />
    </div>
  );
}

export default App;

 

Form.jsx

import React from "react";

function Form(props) {
  return (
    <form className="form">
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      {!props.isRegistered && (
        <input type="password" placeholder="Confirm Password" />
      )}

      <button type="submit">{props.isRegistered ? "Login" : "Register"}</button>
    </form>
  );
}

export default Form;

 

 

 

참고문헌

Conditional Rendering – React