Conditional Rendering

Conditional Rendering is to render different results depending on whether condition is satisfied or not.

Let's say I want to add a prop 'isSpecial' to 'Hello' component.

import logo from "./logo.svg";
import Hello from "./hello";
import Wrapper from "./Wrapper";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Hello name="react" color="red" isSpecial={true} />
        <Hello color="pink" />
      </Wrapper>
    </div>
  );
}

export default App;

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

By using 'isSpecial', '*' is added when 'isSpecial' is true, but not when it's false.

But, with '&&' it can be coded easier.

{isSpecial && <b>*</b>}

This makes * to be seen when isSpecial is true, and not to be seen when it's false.