How to make it so that when you click on one block, the other disappears?-CodePudding

i need that when I click on one block, it opens an input (already implemented), and another block closes, please help. Here is my code: i've already realized onClick input appearing, but cant handle with other

function App() {
const [isChecked, setIsChecked] = useState(false)
const [isClosed, setIsClosed] = useState(false)

const handleCheck = () => {
    setIsChecked(isChecked => !isChecked)
}
const handleClose = () => {
    setIsClosed(isClosed => !isClosed)
}

return (

<div className="App">

    <div onClick={handleCheck}>block one</div>
    {isChecked &&
    <input/>
    }
    <div onClick={handleClose}>block two</div>
    {isClosed &&
    <input/>
    }


</div>

); }

CodePudding user response：


import { useState } from "react"
export default function App() {
  const [isChecked, setIsChecked] = useState(false)
  const [isClosed, setIsClosed] = useState(false)
    
    const handleCheck = () => {
      setIsChecked(true)
      setIsClosed(false)
  }
  const handleClose = () => {
      setIsClosed(true)
      setIsChecked(false)
  }
    return(
      <div className="App">

        <div onClick={handleCheck}>block one</div>
        {isChecked &&
        <input/>}
        
        <div onClick={handleClose}>block two</div>
        {isClosed && 
        <input/>}
        


    </div>
    )

}

CodePudding user response：

do this

function App() {
const [isChecked, setIsChecked] = useState(true)
const [isClosed, setIsClosed] = useState(true)

const handleCheck = () => {
    setIsChecked(isChecked => !isChecked)
}
const handleClose = () => {
    setIsClosed(isClosed => !isClosed)
}
return (

<div className="App">

    <div onClick={handleClose}>block one</div>
    {isChecked &&
    <input/>
    }
    <div onClick={handleCheck}>block two</div>
    {  isClosed &&
    <input/>
    }


</div>
); }