Call a react component inside a ternary operator

Question

There is an export functionality function which, based on an argument which says the type, exports the data in csv or xls format.

It works fine for xls but not for csv, here is the code:

  const exportFile = (exportType) => {
    exportType === 'csv' ? exportCSV() : exportXLS();
  };

  const exportXLS = () => {
    const sheet = XLSX.utils.json_to_sheet(computeExportFields(orders));
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
    XLSX.writeFile(workbook, `MyFile.xls`);
  };

  const exportCSV = () => {
    return <CSVLink {...csvReport} />;
  };

so the problem must be in the last function, exportCSV . Any ideas?

Answer 1

You are returning JSX code from exportCSV function, it should only be in render . Try setting a state to check the exported type, something like:

const [type, setType] = useState();

const exportFile = (exportType) => {
  setType(exportType === 'csv' ? : 'xls');
};

return (
  {type === 'csv' ? <CSVLink {...csvReport} /> : exportXLS()}
);