Please help with this code base.

[amitkumarsingh]

I am unable to read the breadcrumb props.
What am i missing ?

import BreadCrumb from '../../../../components/bread-crumb';
import {scenarioManagerRoutes} from '../../routes';
class ScenarioManagerHome extends React.PureComponent<Props, State> {
render() {
		const scenarioModelList = this.props.scenarioModels.data;
		const breadcrumbs = this.props; // unable to read props
}
}

export default withBreadcrumbs(scenarioManagerRoutes)(ScenarioManagerHome);

const _ScenarioManagerHome = connect(
	(state) => ({
		isLoading: state.scenarioManager.isLoading,
	}),
	(dispatch) =>
		bindActionCreators(
			{ stopScenarioFlow },
			dispatch,
		),
)(ScenarioManagerHome);

export { _ScenarioManagerHome as ScenarioManagerHome };

[icd2k3]

👋 hi @amitkumarsingh . At first glance, you'd want to change...

const breadcrumbs = this.props;
to const { breadcrumbs } = this.props; or const breadcrumbs = this.props.breadcrumbs

If that's not the issue, I'd have to see what's in scenarioManagerRoutes to be able to assist.

[amitkumarsingh]

I tried with what you have mentioned but it's undefined. In my scenario manager there are array of routes as mentioned in code sample.

[icd2k3]

If you try using the HOC without pre-defined routes does it work?

withBreadcrumbs()(ScenarioManagerHome)

The HOC will attempt generate breadcrumbs for you if no routes are provided. If this works we can rule a couple things out!

[amitkumarsingh]

export const scenarioManagerRoutes = [
	{ path: '/scenario/home', component: ScenarioManagerHome, exact: true , breadcrumb : 'Scenario'},
	{ path: '/scenario/model/create', component: ScenarioModelComposer, exact: true , breadcrumb : 'Create Scenario'},
	{ path: '/scenario/model/create/:id?', component: ScenarioModelComposer, exact: true , breadcrumb : 'Edit Scenario'},
	{ path: '/scenario/model/details/:id?', component: ScenarioModelDetails, exact: true , breadcrumb : 'Scenario Details'},

[amitkumarsingh]

If you try using the HOC without pre-defined routes does it work?

withBreadcrumbs()(ScenarioManagerHome)

The HOC will attempt generate breadcrumbs for you if no routes are provided.

Nope.

[amitkumarsingh]

Is there something i am missing ? As per documentaion i have used it correctly ?

[icd2k3]

At first glance the code looks ok, but remotely debugging can be tricky sometimes... I can tell you this HOC has test coverage to ensure it works, but something about your codebase/setup/config etc may be affecting it.

Couple more things:

1.) which version of this component are you using? (2.3.1?)
2.) any errors in console?
3.) when running the HOC w/o route config withBreadcrumbs()(ScenarioManagerHome). What does console.log(this.props.breadcrumbs) output?
4.) I assume withBreadcrumbs()(ScenarioManagerHome) is being mounted somewhere? (not the connect-wrapped version)

[icd2k3]

OH, also, which version of react-router are you using?

[amitkumarsingh]

1.) which version of this component are you using? (2.3.1?) YES
2.) any errors in console? NO
3.) when running the HOC w/o route config withBreadcrumbs()(ScenarioManagerHome). What does console.log(this.props.breadcrumbs) output? undefined
4.) I assume withBreadcrumbs()(ScenarioManagerHome) is being mounted somewhere? (not the connect-wrapped version) I did not understand this
5) "react-router-dom": "^4.2.2",

[icd2k3]

Ok, I'm using 4.3.1, but it shouldn't make a difference... Something else you could try is copying the example component directly into a new component in your codebase and mounting it somewhere. This would rule out any possible issues with your component.

You're probably already doing this, but to be sure... wherever your breadcrumbs component is, it also needs to be nested somewhere within a router component to work. If it sits outside a router component it will error.

[amitkumarsingh]

My app js code. Is there anything missing here ?

class _App extends React.Component<Props> {
	render() {
		return (
			<Provider store={store}>
				<BrowserRouter>
					<Bootstrap>
						<Switch>
							{routes.map((item, index) => {
								return (
									<SensemakerRoute
										key={index}
										path={item.path}
										exact={item.exact}
										component={item.component}
										store={store}
									/>
								);
							})}
						</Switch>
					</Bootstrap>
				</BrowserRouter>
			</Provider>
		);
	}
}

export const App = _App;

[icd2k3]

Looks ok to me - whatever component you use the HOC in just needs to be somewhere nested within <BrowserRouter>

I'm not sure what <Bootstrap> is...

With problems like these it's sometimes better to start fresh to rule out issues. I should have some time to setup a codesandbox link tonight (US Pacific) if you're still having trouble.

[amitkumarsingh]

<Bootstrap> is my another HOC. I have tried but eventually could not get the breadcrumbs up and running.

[amitkumarsingh]

Fixed this issue. Closing it.

[icd2k3]

When you have a moment, could you please post back with a description the issue and how you fixed it? Might help others down the road!