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

<div className="d-flex justify-content-around p-2"> <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} />

</> )} </TookitProvider>

`