TypeError: Cannot read property 'props' of null

[volkova-annie]

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?

[EllaVader]

I have the same problem -- I think there is a bug in the code. Any updates on this?

[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 :)

[vincentaudebert]

@ryami333 is right. Temporary workaround would be to use hideBodyClassName
Sorry about that. I'll leave this issue open as a reminder for the new version to support this case.

[EllaVader]

I guess I didn't explain how the problem shows up for me -- it shows up when trying to iterate over a list and dynamically build an Accordian based on the values in the list.
so

items.map((item) => {
   // build an accordian
  
})

[ryami333]

Sounds like your problem might be unrelated then @EllaVader, even if it is the same error message. Could you please send me a snippet of your actual code?

[ryami333]

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

Let us know how you get on with the upgrade!