I've managed to export the data in csv format but I'm struggling to do in in xls/xlsx/excel format.
There are 2 radio buttons for changing the state value from csv to xls and back, and based on that value the ternary know which format should use for the export.
The csv part works fine but I don't know what to write in order to do the xls export.
Something must be added in the second part of this ternary operator:
{data.exportType === 'csv' ? (
<CSVLink {...csvReport}>export CSV</CSVLink>
) : (
<div>export XLS</div>
)}
This is the component:
import React, { useState } from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import { OutlineButton, RadioButton } from '@thermofisher/react-komodo-design';
import './style.scss';
import { CSVLink } from 'react-csv';
const ExportOrders = () => {
const initialData = {
exportType: 'xls',
page: 0
};
const [data, setData] = useState(initialData);
const orders = useSelector(
(state) => state.deferredPayments.orderLines,
shallowEqual
);
const csvReport = {
data: orders,
filename: 'result.csv'
};
const onChangeHandler = (e, type) => {
const name = e.target.name;
setData({
...data,
[name]: type
});
};
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<form onSubmit={handleSubmit} className="export-container">
<div className="c-radio-container">
<RadioButton
name="exportType"
checkedValue={data.exportType}
value="xls"
onChange={(e) => onChangeHandler(e, 'xls')}
inline>
XLS
</RadioButton>
<RadioButton
name="exportType"
checkedValue={data.exportType}
value="csv"
onChange={(e) => onChangeHandler(e, 'csv')}
inline>
CSV
</RadioButton>
</div>
<OutlineButton>
{data.exportType === 'csv' ? (
<CSVLink {...csvReport}>export CSV</CSVLink>
) : (
<div>export XLS</div>
)}
</OutlineButton>
</form>
);
};
export default ExportOrders;
Any ideas?