Html 如何显示和隐藏react.tsx文件？

我有一个钮扣。当按钮单击时，我想显示表格，当再次单击时，我想隐藏数据。第一个数据可见=错误

Jsx文件无法识别状态。 我试图隐藏的div块名是api

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>
    

  )
}

函数css（）{
}
常量myfunc=（）=>{
返回(
显示

我不确定你想做什么，但我会尽力帮助你

//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;

//导入Apidata
从“React”导入React，{useState}；
常量myFunc=（）=>{
const[toggle，setToggle]=useState（false）；
常量handleHideData=（）=>{
setToggle（！toggle）；
};
返回(
显示
{切换&&(
)}
);
};
导出默认myFunc；

您好，您的州在哪里？我写州时无法定义州，我看到的州找不到名称“州”。ts（2304）什么？您是否从react导入useState表单？我不能使用x类扩展组件，我想这是未定义的，谢谢。这正是我想要的