How to show and hide react .tsx file?

Question

I have a button. When button is clicked, I want to show table and when click again i want hide data. First data visible = false

Jsx file does not recognize state.

The div block name I'm trying to hide is apis.

function css() {
 
}

const myfunc= () => {
return (
   
      <div className="btn">
     <button id="veriGoster" onClick={css}> 
       Show
     </button>
         
        </div>
     <div className="apis">
      < Apidata/> // this component import another page.
      </div>

</div>
  )
}

Answer 1

I'm not really sure what you want to do but i try to help you

//import of Apidata
import React, { useState } from "react";

const myFunc = () => {
    const [toggle, setToggle] = useState(false);

    const handleHideData = () => {
        setToggle(!toggle);
    };

    return (
        <div className="btn">
            <button id="veriGoster" onClick={handleHideData}>
                Show
            </button>

            {toggle && (
                <div className="apis">
                    <Apidata />
                </div>
            )}
        </div>
    );
};

export default myFunc;