Export csv button to parent component

[josedefreitas91]

Question
Is there a way to add the csv export button to the parent component?

Currently I have the table and the button in a child component, but want to move the button to the parent component and I can't get how to pass the props, any suggestions?

//parent
function Parent() {
  return (
    <>
      {/* <ExportCSV { ...props.csvProps } /> */}  {/* I want to move the button here */}
      <TableContent data={data} />
    </>
  );
}

// child
function TableContent({data=[]}) {
  return (
    <ToolkitProvider
      keyField="id"
      data={data}
      columns={columns}
    >
      {
        props => (
          <>
            <ExportCSV { ...props.csvProps } />
            <BootstrapTable
              { ...props.baseProps }
              wrapperClasses="table-responsive"
              rowClasses="text-nowrap"
              noDataIndication="No Data"
              striped
              hover
              condensed
            />
          </>
        )
      }
    </ToolkitProvider>
  );
}

[tauqeer-trailfive]

Try this way
`
<TookitProvider
keyField={Math.floor(Math.random() * 101)}
data={
this.props.time_spent_in_app ? this.props.time_spent_in_app : []
}
columns={this.state.columns}
bootstrap4={true}
pagination={paginationFactory({
sizePerPage: 10,
onPageChange: (page, sizePerPage) => {
console.log(sizePerPage, page);
this.setState({ currentPage: page });
},
page: this.state.currentPage,
hideSizePerPage: true,
showTotal: true,
})}
exportCSV
>
{(props) => (
<>
<ExportCSVButton
className="text-light btn-sm btn bg-primary border-none rounded"
{...props.csvProps}
>
Export CSV Time Spent In App

<BootstrapTable
keyField={"email"}
data={
this.props.time_spent_in_app
? this.props.time_spent_in_app
: []
}
columns={this.state.columns}
bootstrap4={true}
pagination={paginationFactory({
sizePerPage: 10,
onPageChange: (page, sizePerPage) => {
console.log(sizePerPage, page);
this.setState({ currentPage: page });
},
page: this.state.currentPage,
hideSizePerPage: true,
// showTotal: true,
})}
hover
striped
{...props.baseProps}
/>

</>
)}

`