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

Question

• components: DropdownItem
• reactstrap version ^8.0.0
• react version ^16.8.6
• bootstrap version ^4.3.1

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?

Answer 1

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.