CODEWITHSUNDEEP
reactjsreact-proptypesreactstrap
John
John

Reputation: 422

Invalid prop `children` supplied to `DropdownItem` expected a ReactNode

I am using reactstrap dropdown. And I am trying to populate the dropdown items using a map function

render() {
    return (
        <Dropdown isOpen={this.state.open} toggle={this.toggle}>
        <DropdownToggle caret>
            {this.props.name}
        </DropdownToggle>
        <DropdownMenu>
            {this.props.items.map(function(item) {
                return(
                    <DropdownItem key={item}>
                        <text>{item}</text>
                    </DropdownItem>
                );
            })}
        </DropdownMenu>
    </Dropdown>
    );
}

If I do not wrap the {item} inside a tag(div or text) I get the following error while running test case.

console.error node_modules/prop-types/checkPropTypes.js:20
Warning: Failed prop type: Invalid prop children supplied to DropdownItem, expected a ReactNode.
in DropdownItem

Just curious to know why am I getting the warning if I do not wrap it in a tag?

Upvotes: 8

Views: 11850

Answers (2)

Ren&#225;n D&#237;az Reyes
Ren&#225;n D&#237;az Reyes

Reputation: 21

I was getting this error, with a similar code, and it turned out to be that the value of item was an object and not a node or text.

Upvotes: 1

ramirozap
ramirozap

Reputation: 1459

You are getting the warning because the DropdownItem is expecting a node as a child, and is not able to infer if your item is a valid react node or not, then throws the warning.

You could try wrapping the item in a <React.Fragment>, but I'm afraid it will not work, according to documentation on propTypes:

// Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node,

The good news are that propTypes checking only happens in development mode, once you transpile your app all warnings related to propTypes are gone, if you don't want to add the extra element and can live with the warning everything should be good.

Upvotes: 8

Related Questions