react-export-excel how to hide column in excel when exported?

It's because you pass in null as a child component of ExcelFile.

Let's locate the (approximate) line the stacktrace is showing in react-export-excel's source. It loops over all children of that component and will always try to access the props property of them.

// src/ExcelPlugin/components/ExcelFile.js

const columns = sheet.props.children;
const sheetData = [
  React.Children.map(columns, column => column.props.label)
];

So this component will only ever work (i.e. not crash) if all of its children are objects with this expected structure.

You'll get the same error with checked && <ExcelColumn/>, where it receives false as a child. In a regular React component both null and false are "ignored" (they don't have output). But because this component loops over it with React.children, it just gets the exact list you put into it.

Further down the code it looks like it also has no way to prevent a column from being included. You can try passing in other things, but it's likely still going to be included as an extra comma separate column.

Perhaps this could be facilitated by this library by ignoring these values too. It could get tricky, though. As the amount of columns always needs to match the data. So it's understandable that this component does not provide this level of flexibility at the moment.

Alternative

Instead of using <ExcelColumn/> components, you can define the columns in the dataSet object. An example from their documentation:

const multiDataSet = [
  {
    columns: [
      { value: "Name", widthPx: 50 }, // width in pixels
      { value: "Salary", widthCh: 20 }, // width in charachters
    ],
    data: [
      // ...
    ],
  },
  // ...
];

// ...
<ExcelSheet dataSet={multiDataSet} name="Organization"/>

This way you have direct control over the columns list and can filter it depending on certain hook values.

You'll also have to guarantee the rows have the same filters applied.

Here's a quick example implementation showing how to manage the state of the hidden rows. This could be done completely different depending on your use case / existing state management solution.

const allColumns = [{value: "columnA"}, {value: "columnB"} /* ... */];
const [hiddenColumns, setHiddenColumns] = useState({});
const isVisible = col => !hiddenColumns[col.name];
const toggleColumn = col => setHiddenColumns({
  ...hiddenColumns,
  [col.name]: !hiddenColumns[col.name],
})

// Get indexes of hidden columns to hide them in data too.
const hiddenIndexes = Object.entries(hiddenColumns).filter(([,hidden]) => hidden).map(
  ([hiddenCol]) => allColumns.findIndex(column => column.value === hiddenCol)
)
const dataSet = {
  // ...
  columns: allColumns.filter(isVisible);
  data: rows.map(
    cells => cells.filter(
      (cell, index) => !hiddenIndexes.includes(index)
    )
  ),
}

return <Fragment>
  <ExcelFile><ExcelSheet {...{dataSet}}/></ExcelFile>
  {allColumns.map(
    col => 
      <Checkbox
        checked={!isVisible(col)}
        onChange={()=> toggleColumn(col.name)}
      >
        col.value
      </Checkbox>
  )}
</Fragment>