Toggle Class In React Js Using Functional Component #2022

import "./App.css";
import React, { useState } from 'react';

function App() {

  const [show, setShow] = useState(false);

  function showIt() {    
    setShow(!show);
  }

  return (
    <div className="App h-screen bg-gray-100 py-10">
      <div className="container px-7">

        <p className={show ? 'block bg-red-400 p-5 mb-5 text-white' : ' hidden '}> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste aperiam, vitae harum explicabo hic architecto iure fugiat ullam, cum voluptates ipsum officiis id asperiores excepturi ratione tenetur ex dolores sit.</p>

        <button className=" bg-green-400 text-white px-3 py-2 capitalize " onClick={showIt} > toggle</button>


      </div>
    </div>
  );
}

export default App;