Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DropdownMenu setActiveFromChild cannot handle null as child #1294

Closed
Psvensso opened this issue Nov 13, 2018 · 0 comments · Fixed by #1295
Closed

DropdownMenu setActiveFromChild cannot handle null as child #1294

Psvensso opened this issue Nov 13, 2018 · 0 comments · Fixed by #1295

Comments

@Psvensso
Copy link
Contributor

Psvensso commented Nov 13, 2018

  • components: Dropdown
  • reactstrap version #6.5.0
  • import method cjs
  • react version #16.5.1

What is happening?

A very common pattern is the && checks for JSX syntax.
When using this yntax the JSX element can be "null". This unfortunately also requires the component to check for null´s when iterating through the children.

Note:
This is only true for when using the setActiveFromChild prop.

What should be happening?

It should not throw an error complaining about "null"

Steps to reproduce issue

From example but with a dummy && check.

<UncontrolledDropdown setActiveFromChild>
          <DropdownToggle tag="a" className="nav-link" caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem tag="a" href="/blah" active>Link</DropdownItem>
            { null && <DropdownItem tag="a" href="/blah" active>Link</DropdownItem> }
          </DropdownMenu>
</UncontrolledDropdown>

Error message in console

Uncaught TypeError: Cannot read property 'props' of null
    at reactstrap.es.js:944
    at mapSingleChildIntoContext (react.development.js:880)
    at traverseAllChildrenImpl (react.development.js:753)
    at traverseAllChildrenImpl (react.development.js:769)
    at traverseAllChildren (react.development.js:824)
    at mapIntoWithKeyPrefixInternal (react.development.js:900)
    at Object.mapChildren [as map] (react.development.js:922)
    at ProxyComponent.render (reactstrap.es.js:943)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)

Code

React.Children.map(this.props.children[1].props.children, function (dropdownItem) {
            if (dropdownItem.props.active) subItemIsActive = true;
});
Psvensso pushed a commit to Psvensso/reactstrap that referenced this issue Nov 13, 2018
@Psvensso Psvensso changed the title DropdownMenu cannot handle null as child DropdownMenu setActiveFromChild cannot handle null as child Nov 13, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant