WebpackError: TypeError: Cannot read property 'key' of null

[davwheat]

return (
  <XMasonry
    targetBlockWidth={375}
    maxColumns={2}
    className={classes.container}
  >
    {topics.map((topic, i) => {
      if (
        (!props.subjectGroup &&
          topic.nodes[0].frontmatter.subject === props.subject) ||
        (topic.nodes[0].frontmatter.subject === props.subject &&
          topic.nodes[0].frontmatter.subjectGroup ===
            props.subjectGroup)
      ) {
        return (
          <XBlock key={i}>
            <Box className={classes.card}>
              <Zoom
                in
                style={{ transitionDelay: i * 50 + "ms !important" }}
              >
                <div>
                  <TopicCard
                    topic={topic.fieldValue}
                    articleCount={topic.totalCount}
                    subject={subjectLabel}
                    subjectGroup={
                      props.subjectGroup
                        ? props.subjectGroup
                        : undefined
                    }
                  />
                </div>
              </Zoom>
            </Box>
          </XBlock>
        )
      } else {
        return null
      }
    })}
  </XMasonry>
)

My implementation on another page works perfectly fine!

[davwheat]

Turns out it was because I was returning null in the else. Replacing that with return [] fixed the issue, while keeping the behaviour I desired.

This should probably be referenced in documentation (or fixed).

[nikitaeverywhere]

Hello!

Thanks for your issue. Now fixed in 3.0.1!