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>
  )
}

CodePudding user response：

Check your demo It seems to work, but I recommend using onClick={increase} instead of onClick={()=>increase()}. Because it will call the function increase directly when clicking the button.

CodePudding user response：

 **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>
      )
    }
    }