Passing props in a component that is stored in a variable

Question

So I have a simple and straight up question.

So we can store react components in a variable. But now, I want to know if it is possible pass props to a component if it is stored in a variable?

//////////////////////////////////////////////
//////  Normal & typical React component
//////////////////////////////////////////////

const myComponent = <Hello name={'Jamie'} /> 

render () {

  return myComponent;

}


////////////////////////////////////////
//////  What I want
////////////////////////////////////////

const myComponent = <HelloWorld /> 

// I want to be able to add that props here
// something like myComponent.addProps({'name': 'jamie'});

render () {

  return myComponent;

}

My problem is well beyond just this. I wanted to know if we have such a feature in React API.

Answer 1

You can try like following,

React.cloneElement(
  myComponent,
  {prop1: "prop value"}
)

Reference Doc: React Official Doc

Answer 2

Went through kind of same issue in typeScript, had a list of menuItem to map on it in JSX, each one containing a different React Component for icon like this:

const menuItems: {label: string, icon: React.FC, selected:boolean}[] = [
{label: 'Home', icon: <HomeIcon/>, selected: false}, 
{label: 'Live TV', icon: <ScreenIcon/>, selected: false}, 
{label: 'VOD', icon: <PlayIcon/>, selected: true},
{label: 'Podcasts', icon: <MicIcon/>, selected: false},
{label: 'Games', icon: <GameIcon/>, selected: false},
{label: 'App', icon: <MenuIcon/>, selected: false},
{label: 'Services', icon: <ShopIcon/>, selected: false},
{label: 'Languages', icon: <WorldIcon/>, selected: false},];

But I needed to give a "fill" props to the icon if the menuItem was selected or focused, so I changed my array like this:

const menuItems: {label: string, icon: React.FC, selected:boolean}[] = [
{label: 'Home', icon: HomeIcon, selected: false}, 
{label: 'Live TV', icon: ScreenIcon, selected: false}, 
{label: 'VOD', icon: PlayIcon, selected: true},
{label: 'Podcasts', icon: MicIcon, selected: false},
{label: 'Games', icon: GameIcon, selected: false},
{label: 'App', icon: MenuIcon, selected: false},
{label: 'Services', icon: ShopIcon, selected: false},
{label: 'Languages', icon: WorldIcon, selected: false},];

And Called it like this:

    const FocusableListItem: FC<ExportableProps> = (props) => {
  const classes = useStyles(props);

  return (
    <ListItem button key={props.label} className={classes.button} >
      <ListItemIcon>
        <props.icon fill={props.focused || props.selected ? '#6648ff' : '#c4c4c4'}></props.icon>
      </ListItemIcon>
      <ListItemText>{props.label}</ListItemText>
    </ListItem>
  );
};

With this kind of interface for props:

interface ExportableProps extends withFocusableProps {
  label: string;
  icon: React.FC<{fill: string}>;
  onClick?: () => void;
  disabled?: boolean;
  selected?: boolean;
  small?: boolean;
}

And works perfectly ! Don't know if it'll help someone but looks useful.