function Mailbox(props) {

  const unreadMessages = props.unreadMessages;

  return (

    <div>

      <h1>Hello!</h1>

      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>

  );

}

​

const messages = ['React', 'Re: React', 'Re:Re: React'];

ReactDOM.render(

  <Mailbox unreadMessages={messages} />,

  document.getElementById('root')

);

class Component extends React.Component {

    const a = true

    render() {

      return (

        <Container>

          {a == true

           ? (<Button/>)

           : null

          }

        </Container>        

      )

    }

}

​

This is staying: if a == true, render a button component. 

Otherwise render null, in other words nothing.

// single prop

propName={ condition ? something : somethingElse }

propName={ condition && something }

// multiple props

{ ...( condition ? { ...setOfProps } : { ...setOfOtherProps })}

{ ...( condition && { ...setOfProps })}

function Mailbox(props) {

  const unreadMessages = props.unreadMessages;

  return (

    <div>

      <h1>Hello!</h1>

      {unreadMessages.length > 0 &&

        <h2>

          You have {unreadMessages.length} unread messages.

        </h2>

      }

    </div>

  );

}

<Fragment>

  {showMyComponent

    ? <MyComponent />

    : <OtherComponent />}

</Fragment>

//Using IF Statement

function MyComponent({ isLoggedIn }) {

  if (isLoggedIn) {

    return <p>Welcome back, user!</p>;

  } else {

    return <p>Please log in to continue.</p>;

  }

}

​

//Using Ternary Operator

function MyComponent({ isLoggedIn }) {

  return isLoggedIn ? <p>Welcome back, user!</p> : <p>Please log in to continue.</p>;

}

//Using Logical AND && 

function MyComponent({ showContent }) {

  return showContent && <p>Here's some content!</p>;

}