Cannot access props in Higher Order Component React - reactjs

Question

I have a simple class as follows that for the sake of this example just renders out the length of a list loaded from Firebase.
class Companies extends Component {
constructor() {
super();
this.state = {
companies: [],
loading: true
};
this.firebase = new FirebaseList('companies');
}
componentDidMount() {
const previousCompanies = this.state.companies;
this.firebase.databaseSnapshot('companies').then((snap) => {
if (snap.val() === null) {
this.setState({loading: false})
}
});
this.firebase.database.on('child_added', snap => {
previousCompanies.push({
id: snap.key,
...snap.val()
});
this.setState({
companies: previousCompanies,
loading: false
})
});
this.firebase.database.on('child_changed', snap => {
const updatedCompanies = updatedItems(this.state.companies, this.state.currentCompany);
this.setState({
companies: updatedCompanies
})
});
this.firebase.database.on('child_removed', snap => {
const updatedCompanies = removeItem(previousCompanies, snap.key);
this.setState({
companies: updatedCompanies
})
})
}
render() {
return (
<div>
{this.state.companies.length}
</div>
);
}
}
export default WithLoader('companies')(Companies);
This is a pattern I frequently repeat, so I want to build a Loader into a Higher Order Component, to show a Loader animation when the data is being fetched from the database.
I'm using the following code for this:
const WithLoader = (propName) => (WrappedComponent) => {
return class WithLoader extends Component {
componentDidMount() {
console.log(this.props)
}
isEmpty(prop) {
return (
prop === null ||
prop === undefined ||
(prop.hasOwnProperty('length') && prop.length === 0) ||
(prop.constructor === Object && Object.keys(prop).length === 0)
)
}
render() {
return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComponent {...this.props}/>
}
}
};
export default WithLoader;
I'm trying to access the companies from the state of the Companies component in my Higher Order Component. However, when I console.log(this.props) in my Higher Order Component, I only get the history, match and location props.
What am I doing wrong?

Answer 1

since withLoader is the HOC so first withLoader will be rendered before the Companies component, because of which you are getting only routes and match as props.
since withLoader is wrapping the companies component so it will access the props of its parent where it is rendered not the props of its wrapped component.
according to your query there are two ways
either you fetch all the data in HOC and then render the Companies Component
or
pass the fetched data from parent to the Companies component.
<Companies companylist={this.state.company} />
what you are trying to do is that you are trying to pass the props of its child which is not yet rendered.