score:2

look at this code it will help to tweak your code

export default function datalistpage(props: datalistprops) {
const csvlinkref = useref<
    csvlink & htmlanchorelement & { link: htmlanchorelement }
  >(null); // setup the ref that we'll use for the hidden csvlink click once we've updated the data

const [data, setdata] = usestate<datatypeobj[]>([]);

 const hanldeexportbutton = async () => {
    const data: datatypeobj[] = await fetchdata();
    setdata(data);
    csvlinkref?.current?.link.click();
  };

 return (
<csvlink
        data={data}
        classname="exportbutton"
        filename="file.csv"
        ref={csvlinkref}
      >
      </csvlink>
        <button
          color="primary"
          variant="contained"
          size="small"
          starticon={<getappicon />}
          onclick={hanldeexportbutton}
        >
          export as csv
        </button>
        );
} //func datalistpage end

Related Query

More Query from same tag