why cannot I see my modal when I increased number? - reactjs

Question

Can you please show me why my Modal is not show up when I increased number?
Counting is working but Modal is not working.
I want to show Modal when I increase number. Thank you
function App() {
const [count, setCoutn] = useState(0)
const [showModal, setShowModal] = useState(false)
const increase = () => {
setCoutn(count + 1)
setShowModal(true)
}
return (
<>
{ showModal && < Modal /> }
<p className="text-center mt-5 mt-5 fs-5 count">{count}</p>
<div className="btn-box">
<button className="btn btn-outline-primary" onClick={()=>increase()}>increase</button>
</div>
</>
);
}
const Modal = () => {
return (
<div>
<p className='modal'>Modal</p>
</div>
)
}

Answer 1

Check your demo
instead of :
onClick={()=>increase()}
But I recommend using:
onClick={increase}
Because it will call the function increase directly when clicking the button.

Answer 2

**You cant see modal,because showModal is false default!**
function App() {
const [count, setCoutn] = useState(0)
const [showModal, setShowModal] = useState(false)
const increase = () => {
setCoutn(count + 1)
setShowModal(true)
}
if(showModal) {
return (
<>
<p className="text-center mt-5 mt-5 fs-5 count">{count}</p>
<div className="btn-box">
<button className="btn btn-outline-primary" onClick={()=>increase()}>increase</button>
</div>
</>
);
}else{
return (
<div>
<p className='modal'>Modal</p>
</div>
)
}
}