Storing component into a variable and reuse it

Question

Ok i got components imported as

import Payment from './pages/payment';
import Chat from './pages/chat';

Now I am using Drawer component and using it together with Navigator my renderScene become something like this

if( route.id == 'payment'){
    return  <Drawer  xx={} yy={} and a lot more >
              <Payment navigator={navigator} />
            </Drawer>
}

if(route.id == 'chat'){
    return <Drawer  xx={} yy={} and a lot more >
              <Chat navigator={navigator} />
            </Drawer>
}

Those lengthy Drawer code are being used again and again. I want to store that <Payment navigator={navigator} > or the other into a variable and then return that with Drawer only once.

How can i store it and return it with Drawer?

Thanks

Ferran Negre · Accepted Answer · 2020-05-29 11:28:02Z

10

Not sure if you are asking this but what about something like:

const routes = {
 payment: Payment,
 chat: Chat
 ...
}

And then, just:

const Scene = routes[route.id];
return (
  <Drawer>
    <Scene navigator={navigator}/>
  </Drawer>
)

edited May 29, 2020 at 11:28

answered Aug 22, 2016 at 9:40

Ferran Negre

3,8213 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cjmling Over a year ago

Thanks you. I actually tried very similar to this before but was using var instead of const and it was giving me error. Changed to const and it work :)

cjmling · Accepted Answer · 2016-08-22 11:49:55Z

2

Here you have 3 options:

// 1. Group the drawer props in an object
const drawerProps = {
  xx: ...,
  yy: ...
};
<Drawer {...drawerProps}>
  <Chat navigator={navigator} />    
</Drawer>

// 2. Define a wrapper object that populates the common Drawer props
const CustomDrawer = ({ children }) => (
  <Drawer  xx={} yy={} and a lot more>
    {children}
  </Drawer>
);


// 3. Define a wrapper object that populates the common Drawer props with default props. (Can be 
// overriden.)
const CustomDrawer = ({ 
  xx='XX',
  yy='YY',
  children 
}) => (
  <Drawer  xx={xx} yy={yy} and a lot more>
    {children}
  </Drawer>
);

EDIT: I missunderstood your question, for storing the inner part you just have to assign it to a varible and use it.

const routes = {
  chat: <Chat navigator={navigator} />,
  payment: <Payment navigator={navigator} />,  
}


<Drawer {...drawerProps}>
  { routes[route.id] }
</Drawer>

edited Aug 22, 2016 at 11:49

cjmling

7,29911 gold badges50 silver badges83 bronze badges

answered Aug 22, 2016 at 9:38

Manolo Santos

1,9131 gold badge14 silver badges25 bronze badges

1 Comment

cjmling Over a year ago

Thanks , very similar approach to accepted answer :)

Guillaume Brioudes · Accepted Answer · 2022-03-09 13:11:15Z

I propose this solution with a React hook (React v16.8+).

The useMemo returns a component according to the route agument passed to the switch. The useMemo is updated each time one of the internal variables (passed as a second argument as route) is updated.

import React, { useState, useMemo } from 'react';

export default function App ({
    route,
    navigator
}) {
    const [route, setRoute] = useState('payment');

    const mainContent = useMemo(() => {
        return () => {
            switch (route) {
                case 'payment':
                    return (
                        <Payment navigator={navigator} />
                    );
    
                case 'chat':
                    return (
                        <Chat navigator={navigator} />
                    );
            }
        }
    }, [route, navigator])
    
    return (
        <Drawer xx={} yy={} and a lot more >
            { mainContent() }
        </Drawer>
    );
}

Collectives™ on Stack Overflow

Storing component into a variable and reuse it

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related