Conditional JSX patterns

conditional-jsx.jsx

const value = 'text'

// - without else statement

// single-line
return (
  <div>
    {
      value && <span>{value}</span>
    }
  </div>
)

// multi-line
return (
  <div>
    {
      value && (
        <span>{value}</span>
      )
    }
  </div>
)

// - using else statement

// single-line
return (
  <div>
    {
      value
        ? <span>{value}</span>
        : <span>no value</span>
    }
  </div>
)

// multi-line
return (
  <div>
    {
      value ? (
        <span>
          {value}
        </span>
      ) : (
        <span>
          no value
        </span>
      )
    }
  </div>
)