React - hide and show elements with useState

0 votes
added Feb 1 in React by lcjr First Warrant Officer (10,930 points)

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>} - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.