CODEWITHSUNDEEP
reactjsreact-routerparameter-passinghigher-order-components
Kratos
Kratos

Reputation: 1114

Higher order component in router needs to pass router parameters

I have created the following higher order componentimport React, { useEffect } from 'react'

export const withCall = (WrappedComponent, calllName) => {

    const HOC = () => {
        useEffect(() =>{report(calllName)}, [])
        return <WrappedComponent />
    }

    return HOC
}

and this route:

<Route exact path={pagePath/:someId} component={withCall(ContainerComponent, 'any_call_name')} />

In the ContainerComponent I am trying to access this.props.match.params... As long as I am not using the HoC in between ( <Route exact path={pagePath/:someId} component={ContainerComponent} />) I have these properties, but when I use it I can't access them anymore. How can I pass them down to it while keeping the higher order component generic?

Upvotes: 0

Views: 147

Answers (1)

Will
Will

Reputation: 36

Try this:

const HOC = (props) => {
    useEffect(() =>{report(calllName)}, [])
    return <WrappedComponent {...props} />
}

Upvotes: 2

Related Questions