React - hide and show elements with useState

Question

First, declare the const, useState(false) or (true)

// Set initial state to false for hidden
  const [showSearchFor, setShowSearchFor] = useState(false);
  const [showGenerate, setShowGenerate] = useState(false);
  const [showStop, setShowStop] = useState(false);
  const [showDescription, setShowDescription] = useState(false);

 

By default, all mentioned element visibility is hidden as per useState(false) in const:

{showSearchFor && <div className='searchFor'>Searching for: {latestKeyedText}</div>}
{showGenerate && <div className='generate'>Generating answers for you…</div>}
{showStop && <div className='stop'>Stop Responding</div>}
{showDescription && <div className='description'><MainDummyDesc /></div>}