【React】三項演算子でjsxを分岐

コード

import { useState } from "react"

export const App = () => {
  const [bool, setBool] = useState(false)
  return bool?(
    <div>true</div>
  ) : (
    <div>false</div>
  )
}

export default App

import { useState } from 'react'

export const App = () => {
  const [bool, setBool] = useState(false)
  return (
    <div>
      <button onClick={() => setBool(!bool)}>true/false</button>
      {bool ? <p>true</p> : <p>false</p>}
    </div>
  )
}

export default App

説明

state bool に応じて <div>true</div> と <div>false</div> が出し分けられる。
上記どちらのパターンでも利用可能。