TypeError: Cannot read property 'url' of undefined

[redlinecodes]

I'm getting this error now locally and I'm not sure why... I haven't changed any relevant code for rendering results.

The error seems to be coming from the <a .... > below in the renderWebResults function:

const renderWebResults = (item, triggerClickAnalytics) => (
    <Box
      style={resultBox}
      key={item._id}
      // key={item._itemId} legacy Analytics
      onClick={triggerClickAnalytics(item)}
    >
      <Box
        style={resultsBoxContent}
      >
        <Typography component="div">
          <Box style={resultsBoxContentLink}>
          **<a href={item.article.url}>**
            <Truncate lines={1} trimWhiteSpace ellipsis="...">
              {item.article.headline}
            </Truncate>
          </a>
          </Box>
        </Typography>
        <Typography>
          <span style={cacheColor}>cache url:</span> <span style={textColor}>{item.article.url}</span>
        </Typography>
        <Typography component="p">
          <Truncate lines={3} style={textColor}>
          {item.article.description}
          </Truncate>
        </Typography>
        <Typography>
          <span style={attrColor}>Published Date:</span>{'  '}<span style={textColor}>{item.article.datePublished}</span>
          {'   '}
          <span style={attrColor}>Author:</span>{'  '}<span style={textColor}>{item.article.author}</span>
        </Typography>
      </Box>
    </Box>
  );

And then I call it renderItem below in ReactiveList:

<Route path="/search" render={() => (
        <Box>
        <ReactiveList
          componentId="results-list"
          dataField="article_author"
          showLoader={true}
          loader={
            <CircularProgress
              variant="determinate"
              className={classes.progress}
              value={this.state.completed} 
            />
          }
          className="results-list"
          showResultStats={true}
          renderResultStats={
            renderWebResultStats
          }
          react={{ or: ['q'] }}
          pagination={true}
          paginationAt="bottom"
          pages={10}
          size={10}
          **renderItem={(item, triggerClickAnalytics) => renderWebResults(item, triggerClickAnalytics)}**
          renderNoResults={renderNoResults}
          innerClass={{
            pagination: css({
              textAlign: 'left',
              active: '#1673e6',
              padding: '0px 2px',
              margin: '0xp 2px',
              list: '#fff',
            })
          }}
        />
        </Box>
              )}
            />

[bietkul]

@redlinecodes You should add a check before reading url value from item.article. This error is not related to ReactiveSearch.

[redlinecodes]

@bietkul So then the code looks good to you?!? So its just a timing thing... the data may not have been received yet? Its weird tho... its been working fine and it is ONLY happening locally. Our production code is identical and its working fine.