reactJs App js - passing incoming data as props - reactjs

Question

How do I pass data from the app.js file as json to the app.js file as props. I want to display the incoming data as json in the whole project.
I want to pass the incoming data as props.
{id: 1, first_name: "", last_name: "", profile: {…}}
{id: 1, userKey: "0245abb9-2837-4f37-ae02-9be1b88887ef", gsmNo: "05442221111", phone: ""}
Thank you from now
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config';
import './App.scss';
import {updateCustomer} from "../components/helpers/actions/customerActions";
import { connect } from "react-redux";
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
// Containers
const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));
// Pages
const Login = React.lazy(() => import('../views/Pages/Login'));
const Register = React.lazy(() => import('../views/Pages/Register'));
const Page404 = React.lazy(() => import('../views/Pages/Page404'));
const Page500 = React.lazy(() => import('../views/Pages/Page500'));
class App extends Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
this.state = {
profile_items: [ ]
}
}
componentDidMount() {
this.props.onUpdateCustomer({ID: "-1", customerKey: "-1"});
console.log("app.js");
return fetch('http://127.0.0.1:8000/api/account/me',
{
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
},
})
.then((response) => response.json() )
.then((responseData) => {
console.log(responseData);
this.setState({
profile_items: responseData
});
//console.log(this.state.profile_items)
return responseData;
})
.catch(error => console.warn(error));
}
render() {
return (
<BrowserRouter>
<React.Suspense fallback={loading()}>
<Switch >
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
<Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
</Switch>
</React.Suspense>
</BrowserRouter>
);
}
}
const mapStateToProps = (state, props) => {
return state;
};
const mapDispatchToProps = {
onUpdateCustomer: updateCustomer,
};
export default connect(mapStateToProps, mapDispatchToProps) (App );

Answer 1

You can use HOC to pass props into Lazy Component. With my option, I think it work.
Create HOC:
const LazyHOC = ({ component: Component, ...rest }) => (
<Component {...rest} />
)
import your component:
const ComponentExample = React.lazy(() => import('./components/ComponentExample'));
Wrap Component with HOC:
const LazyComponentExample = props => <LazyHOC component={ComponentExample} {...props}/>
And you can pass props like this:
<React.Suspense fallback={loading()}>
<Switch >
<Route
exact path="/login"
name="Component example"
render={<LazyComponentExample props={...} />} />
</Switch>
</React.Suspense>