Warning: Invalid value for prop `dispatch` on <span> tag

Question

I've read blog about new changes (where is describing about such warning), so I have a question: what is the right way to write pure components which is not used any action?

Here is a sample with this error

const Text = ({
    tagName = 'span',
    className = '',
    children = null,
    ...restProps
}) => {
    const Tag = tagName;

    return (
        <Tag {...restProps} className={className}>
            {children}
        </Tag>
    );
};

Text.defaultProps = {
    tagName: 'span',
    className: '',
    children: null,
};

export default Text;

If I use connect to connect Text to the store - I will have this error because I have nothing to write in mapDispatchToProps function and according to docs: "If you do not supply your own mapDispatchToProps function or object full of action creators, the default mapDispatchToProps implementation just injects dispatch into your component’s props."

so I have a choise:

to declare dispatch in props in dumb component and omit it in params in Text rendering
to write fake mapDispatchToProps function in connect

which variant is the more desirable?

Answer 1

You are not spreading dispatch from props passing to Tag

const Text = ({
    tagName = 'span',
    className = '',
    children = null,
    dispatch,
    ...restProps
})