Hola chicos, estoy tratando de agregar un botón de descarga para exportar algunos datos Json como csv, pero esto no funciona para mí. Los datos que quiero exportar están dentro shareFilterHead y shareFilterRows y los datos están en Json. Estoy usando el CsvDownloader de 'react-csv-downloader'.

 import React, {Component} from "react"; import DynamicTable from '@atlaskit/dynamic-table'; import styled from 'styled-components'; import CsvDownloader from 'react-csv-downloader'; export default class ShareFilter extends Component { constructor(props) { super(props); this.state = { error: null, isLoaded: false, shareFilterRows: [] }; } componentDidMount() { fetch(AJS.contextPath() + "/rest/securityrestresource/1.0/results?check=ShareFilter") .then((res)=>{ if(res.ok) { return res.json(); } }).then((res)=>{ this.setState({ isLoaded: true, shareFilterRows: res.map((row, index) => ({ key: `row-${index}-${row.filterID}`, cells: [{ key: `${row.filterID}`, content: row.filterID, }, { key: `${row.author}`, content: row.author, }, { key: `${row.filtername}`, content: row.filtername, }, { key: `${row.jql}`, content: row.jql, },]})) }) }) } render() { const { error, isLoaded, shareFilterRows } = this.state; if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading Shared Filters...</div>; } else { return (<Wrapper> <div> <DynamicTable head={shareFilterHead} rows={shareFilterRows} rowsPerPage={10} defaultPage={1} loadingSpinnerSize="large" isLoading={false} isFixedSize defaultSortKey="filterID" defaultSortOrder="ASC" onSort={() => console.log('onSort')} onSetPage={() => console.log('onSetPage')} /> </div> </Wrapper> ); } } } AJS.toInit(function () { AJS.$(document).on("click", "#downloadShareFilterCheck", function(){ <CsvDownloader filename="myfile" extension=".csv" separator=";" wrapColumnChar="'" columns={shareFilterHead} datas={shareFilterRows} text="DOWNLOAD" /> }); }