Passing props to a React Redux connected component wrapped in HOC

Question

I am using a HOC to wrap all my components with the Redux Provider. But when using the components individually I sometimes need to pass props to them and using ownProps gives me the props from the HOC wrapper.

How can I pass props directly to the connected component?

I am essentially sprinkling React to an existing site, so I need to render my components to the DOM using HTML elements as containers. I want all the containers to be connected to the store but I also want to pass data directly to the HTML elements on the page and use that data in the component.

// HOC component 'withStore.js'
export default function (WrappedComponent) {
    function ReduxStore() {
        return (
            <Provider store={ store }>
                <WrappedComponent testProp="Dont show me!" />
            </Provider>
        );
    }
    return ReduxStore;
}


// The connected component I want to pass props directly to
export class ListingThumbnails extends PureComponent {
    render() {
        const {
            ownProps,
        } = this.props;

        console.log(this.props.ownProps);
    }
}

const mapStateToProps = (state, ownProps) => ({
    state,
    ownProps,
});

export default withStore(connect(mapStateToProps)(ListingThumbnails));


// Rendering to the DOM
ReactDOM.render(
    <ListingThumbnailsComponent testProp="Show me!" />,
    document.querySelector('#listing-thumbnails-container'),
);

The console log is displaying the props passed to the WrappedComponent

But I want it to show the props passed to the ListingThumbnailsComponent

mfrachet mfrachet · Accepted Answer · 2019-01-12T15:58:49

I'm not sure to get your problem, but your ReduxStore is a component now. It's a component around your "wrapped component". It means that you have to pass the props of the ReduxStore to its child to console log the props at a deeper level:

export default function (WrappedComponent) {
    function ReduxStore(props) {
        return (
            <Provider store={ store }>
                <WrappedComponent {...props} />
            </Provider>
        );
    }
    return ReduxStore;
}

Passing props to a React Redux connected component wrapped in HOC

1 Answers