CODEWITHSUNDEEP
reactjs
Fatih mzm
Fatih mzm

Reputation: 395

reactjs, sending props from one component to another

I want to send props from component A to component B. How can I do it? By the way I'm using react.lazy().

import React from 'react';

const CustomerList = React.lazy(() => 
import('./views/CustomerList/CustomerList'));
const CustomerDebt = React.lazy(() => 
import('./views/CustomerDebt/CustomerDebt'));
const routes = [
  { path: '/', exact: true, name: 'Home page' },
  { path: '/customerlist', name: 'Debt list', component: CustomerList},
  { path: '/customerdebt', name: 'Customer Debt', component: CustomerDebt},

Upvotes: 1

Views: 83

Answers (1)

thortsx
thortsx

Reputation: 2280

In this case, I never use React.lazy. But I can suggest for you one way. use HOC to pass props. Create HOC:

   const LazyHOC = ({ component: Component, ...rest }) => (
      <Suspense fallback={...}>
         <Component {...rest} />
      </Suspense>
   )

Import your Component:

   const CustomerList = React.lazy(() => import('./views/CustomerList/CustomerList'));
   const CustomerDebt = React.lazy(() => import('./views/CustomerDebt/CustomerDebt'));

Wrap Component with HOC:

   const LazyCustomerList = props => <LazyHOC component={CustomerList} {...props}/>
   const LazyCustomerDebt = props => <LazyHOC component={CustomerDebt} {...props}/>

And you can pass props like this:

   const routes = [
  { path: '/', exact: true, name: 'Home page' },
  { path: '/customerlist', name: 'Debt list', component: <LazyCustomerList props={...} />},
  { path: '/customerdebt', name: 'Customer Debt', component: <LazyCustomerDebt />},

Upvotes: 1

Related Questions