Ad

React: Uncaught At TypeError: Cannot Read Property 'filter' Of Null Within A Property

- 1 answer

I am rather new to React and I am supposed to debug somebody else's code. The error is

React: Uncaught at TypeError: Cannot read property 'filter' of null

The corresponding code snippet (within render()) where the error occurs is

 <MyTable size="small"
    dataSource={this.props.summaryData.filter(record => record.DifferenceValue !== 0 && 
                record.Value >= record.AdjustedValue) }
    rowKey={(record) => (record.Id).toString()} 
    pagination={false}
    locale={{ emptyText: 'No applicable summary data found' }}>

I guess, that it is not important that Table comes from Antd and class MyTable extends Table<Interfaces.ViewEntry> { } which is essentially an Antd Table.

I understand that I should catch a possible null value of this.props.summaryData.filter() or of summaryData within the property dataSource. I want to have a workaround like the following pseudocode, but I am not sure about the correct syntax:

dataSource = {
  var out = this.props.summaryData.filter(record => record.DifferenceValue !== 0 &&
                                         record.ErdrValue >= record.AdjustedValue)
  if out = null return null else return out;
}

I am sure it is easy, but I just don't know the correct syntax, please help me.

Related questions

Ad

Answer

First, check if summaryData is null or not -

let dataSource = this.props.summaryData ? 
         this.props.summaryData.filter(record => record.DifferenceValue !== 0 && record.Value >= record.AdjustedValue):[]

Now dataSource is either empty [] or it is an array returned by your filter function. then

<MyTable size="small"
    dataSource={dataSource}
    rowKey={(record) => (record.Id).toString()} 
    pagination={false}
    locale={{ emptyText: 'No applicable summary data found' }}>
Ad
source: stackoverflow.com
Ad