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

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 ?

[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?

[thinhnk]

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