Alternative ways to pass react component into higher order function - reactjs

Question

I'm using ReactJS higher order function to enhance the existing component with API fetching capability together with loading , error views.In order to become more reusable , I wish another programmer who use my HOC to be able to add customize loading , error views like this.
var FetchTest = fetchableContainer({
url:"https://jsonplaceholder.typicode.com/posts",
loadingView: <div>..Custom Loading..</div>,
noConnectionView: <div>.. Custom no connection view .. </div>,
errorView: <div>Custom Error View</div>
})(TestComponent);
Unfortunately , it shows error Message .
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object.
Can someone tell me another solutions with clean and elegant code.Here is my fetchableContainer.
import React, {Component} from 'react';
import axios from 'axios';
import loadingView from './loadingView.js';
import errorView from './errorView.js';
import noDataView from './noDataView.js';
import noConnectionView from './noConnectionView.js';
//redux imports
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Link } from 'react-router';
const fetchableContainer = (json) => (BaseComponent) => {
let url = json.url || "";
let loadingView = json.loadingView || loadingView;
let errorView = json.errorView || errorView;
let noConnectionView = json.noConnectionView || noConnectionView;
let noDataView = json.noDataView || noDataView;
class FetchableContainer extends React.Component{
constructor(props){
super(props);
this.state = {
fetchData: null,
loading: false,
fetchError: null,
interntConnection: navigator.onLine?true:false,
};
}
componentDidMount(){
this.setState({loading: true});
axios.get(this.url,{
headers: {
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
}
}).then((response)=>{
this.setState({fetchData: response.data});
this.setState({loading: false});
}).catch((error)=>{
console.log("Erorr happen");
console.log(error);
this.setState({fetchError: error});
});
}
render(){
if(!this.state.interntConnection){
return <this.noConnectionView/>;
}
if(this.state.loading){
return <this.loadingView/>;
}
if(this.state.fetchError){
return <this.errorView/>;
}
return (
<BaseComponent {...this.props}{...this.state}/>
);
}
}
}
export default fetchableContainer;

Answer 1

Firstly, your FetchTest is undefined because the fetchableContainer doesn't return anything! Technically, it returns a function which returns nothing. You should return the class if you actually want to use it.
Also, this seems a strange way to create a component. Currently, it would be equivalent to do this:
var FetchTest = fetchableContainer({
url:"https://jsonplaceholder.typicode.com/posts",
loadingView: <div>..Custom Loading..</div>,
noConnectionView: <div>.. Custom no connection view .. </div>,
errorView: <div>Custom Error View</div>
}, TestComponent);
Container:
//...
const fetchableContainer = (json, BaseComponent) =>
class FetchableContainer extends React.Component {
//...
}
}
export default fetchableContainer;
The error message is probably displayed because you are trying to use the undefined FetchTest in some code that you haven't posted.
I would recommend creating a React Container in the standard way (https://redux.js.org/basics/usage-with-react#implementing-container-components) and passing in the parameters you need as props.
For example, it might look a little like this:
// Imports etc...
class FetchableContainer extends React.Component {
// ...
render() {
//...
return this.props.BaseComponent(/* Props */);
}
}
export default FetchableContainer;

Answer 2

I just found the error.This is because I was passing the JSX component and trying to fetch that JSX component.The error was solved by passing the function that return JSX component and fetch that function on render method of FetchableContainer like this.
var FetchTest = fetchableContainer({
url: 'https://jsonplaceholder.typicode.com/posts/',
errorView: ()=> <div>Custom Error View</div>,
LoadingView:()=><div>Custom loading</div> ,
NoConnectionView: ()=> <div>Custom no Connection</div>
})(TestComponent);
My Final code for FetchableContainer is as follow.
import React, {Component} from 'react';
import axios from 'axios';
import LoadingView from './LoadingView';
import ErrorView from './ErrorView';
import NoDataView from './NoDataView';
import NoConnectionView from './NoConnectionView';
//redux imports
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Link } from 'react-router';
const fetchableContainer = (json) => (BaseComponent) =>{
let LoadingFetchView = json.LoadingView || LoadingView;
let fetchUrl = json.url || "https://jsonplaceholder.typicode.com/posts/";
let ErrorFetchView = json.ErrorView || ErrorView;
let NoConnectionFetchView = json.NoConnectionView || NoConnectionView;
let NoDataFetchView = json.NoDataView || NoDataView;
class FetchableContainer extends React.Component{
constructor(props){
console.log("inside constructure");
console.log(LoadingView);
super(props);
this.state = {
fetchData: null,
loading: false,
fetchError: null,
interntConnection: navigator.onLine?true:false,
};
}
componentDidMount(){
this.setState({loading: true});
axios.get(fetchUrl,{
headers: {
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
}
}).then((response)=>{
this.setState({fetchData: response.data});
this.setState({loading: false});
}).catch((error)=>{
console.log("Erorr happen");
console.log(error);
this.setState({fetchError: error});
});
}
render(){
if(!this.state.interntConnection){
return <NoConnectionFetchView/>;
}
if(this.state.loading){
return <LoadingFetchView/>;
}
if(this.state.fetchError){
return <ErrorFetchView/>;
}
return (
<BaseComponent {...this.props}{...this.state}/>
);
}
}
return FetchableContainer;
}
export default fetchableContainer;