🦔
【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>
が出し分けられる。
上記どちらのパターンでも利用可能。
Discussion