TypeError: Cannot read property 'props' of null

Hello!

I tried to create dynamically accordion with condition.

But I got an ERROR:

accordion.js?96e3:69 Uncaught TypeError: Cannot read property ‘props’ of null at eval (accordion.js?96e3:69) at mapSingleChildIntoContext (react.development.js?99ee:914) at traverseAllChildrenImpl (react.development.js?99ee:787) at traverseAllChildrenImpl (react.development.js?99ee:803) at traverseAllChildren (react.development.js?99ee:858) at mapIntoWithKeyPrefixInternal (react.development.js?99ee:934) at Object.mapChildren [as map] (react.development.js?99ee:956) at Accordion.preExpandedItems (accordion.js?96e3:68) at new Accordion (accordion.js?96e3:40) at constructClassInstance (react-dom.development.js?cada:9760)

The example of my code:

const isCompany = false;

<Accordion>
  <AccordionItem>
    <AccordionItemTitle className={styles.item}>
      <div className={styles.accordionArrow} role="presentation" />
      <h3 className={styles.itemHeader}>
        Accordion Header 1
      </h3>
    </AccordionItemTitle>
    <AccordionItemBody>
      <p>
        Accordion Body Content 1
      </p>
    </AccordionItemBody>
  </AccordionItem>
  
  {isCompany && (<AccordionItem>
    <AccordionItemTitle className={styles.item}>
      <div className={styles.accordionArrow} role="presentation" />
      <h3 className={styles.itemHeader}>
        Accordion Header 2
      </h3>
    </AccordionItemTitle>
    <AccordionItemBody>
      <p>
        Accordion Body Content 2
      </p>
    </AccordionItemBody>
  </AccordionItem>)}
</Accordion>

Could you please help me to resolve this problem?

[ryami333]

I sort of understand why this might happen given our current codebase, because the accordion Accordion component does some traversal of its ‘children’ and all of its children must be AccordionItem components. However, in this instance ^ there is a child where child === false (because {isCompany & foo} === false). Make sense?

A workaround would be to hide the AccordionItem with some additional className, rather than conditionally rendering it. We’re currently working a big new release which should resolve this undesired behaviour, so hold tight 😃

[ryami333]

@volkova-annie this should be solved in v2.0.0 😀

Let us know how you get on with the upgrade!