Demonstrate poor practice of JSX intertwined with logic, coupled with multi-line ternary operator statements

logic-in-jsx.js

render () {
  const { visible } = this.props
  return (
    <div className={ visible ? 'expanded' : 'collapsed' }>
      { 
      visible ? <div>
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
        // Dozens of lines of JSX code here
      </div> : null // <- null is a code smell!
      }
    </div>
  )
}