I want to click the CSV download link after the data loaded from the server. I tried all the approaches from https://github.com/react-csv/react-csv/issues/237
const csvLinkRef = React.useRef<CSVLink & HTMLAnchorElement & { link?: HTMLAnchorElement }>();
<CSVLink
ref={csvLinkRef}
data={tableDataToDownLoadAsCSV}
/>
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