First fetch data from server then export xlsx file with same click

[arpitprod]

First I want to fetch data with API then that data should download with react-data-export. For this, I want to use single button for both work.

this time, I'm using like this - <Button onClick={this.fetchData}>Fetch Data</Button>

fetchData() {
  axios.get('api_link')
    .then(({data}) => {
      this.setState({data})
    })
}

and then Download data -

<ExcelFile element={<button>Download Data</button>}>
    <ExcelSheet data={data} name="Employees">
        <ExcelColumn label="Name" value="name"/>
        <ExcelColumn label="Wallet Money" value="amount"/>
        <ExcelColumn label="Gender" value="sex"/>
        <ExcelColumn label="Marital Status" value={(col) => col.is_married ? "Married" : "Single"}/>
    </ExcelSheet>
</ExcelFile>

but Buttons will show 2 times. it's not good looking for users.

So, How can I fetch and download data with only one click ?

[arpitprod]

We can use like this

<Button onClick={this.fetchData}>Fetch Data</Button>
{this.state.data != null ? 
    <ExcelFile element={<button>Download Data</button>} hideElement={true}>
        <ExcelSheet data={data} name="Employees">
            <ExcelColumn label="Name" value="name"/>
            <ExcelColumn label="Wallet Money" value="amount"/>
            <ExcelColumn label="Gender" value="sex"/>
            <ExcelColumn label="Marital Status" value={(col) => col.is_married ? "Married" : "Single"}/>
        </ExcelSheet>
    </ExcelFile>
        :
        null
}

[securedeveloper]

Hi @arpitprod in your case you can use hideElement property, you can call exactly like above code and it will work.

[arpitprod]

@securedeveloper How to add sheet style like this image with json dataset, there thousands rows so, I can't add style in every cell like example 4

[arpitprod]

If I want to download data more than once then 2nd time download button is not working. API calling but file is not downloading 2nd time.

[thinhnk]

@arpitprod after the first download => set state data = null. That is my trick.

[securedeveloper]

@arpitprod Please go either with the solution @thinhnk suggested or use a callback which delivers prepared data each time instead of state.

[neeleshbisht99]

How to set state data = null after the first download ??

[arpitprod]

@neeleshbisht99 when you will be click on download button, call a function inside button with onClick and set data null with setState/useState this.setState({data: null}) or if you are using function component and you are using like const [data, setData] = useState(null); then you can apply with setData(null);

[neeleshbisht99]

Thanks, that worked fine, but it would be better if there is an event listener, because it's very common case I guess. Or if we can override the button click.

[javaGuy33]

Hi @arpitprod in your case you can use hideElement property, you can call exactly like above code and it will work.

Hi @securedeveloper, when I am trying to hide the button using 'hideElement' property. The excel file is downloading twice. Did you come across such king of issue?

[venkateshtechefficio]

The excel files is downloading 2 times. do we have any solution, thank you