CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6
Palaniichuk Dmytro
Palaniichuk Dmytro

Reputation: 3173

Generic method to render React component depends on two props

I've got a component that gets two props, function and node(or string with label text), depends on these props I render the icon with some label. In future, I'm going to add more button and want to create the generic method that rendered this icon more flexible. So how to create such generic method for that? 

const Wrapper = ({onRefresh, onExportToExcel, actionsLabel}) => {
   return 
    {onRefresh && !!actionsLabel.refresh &&
                    <InlineIconButton name='refresh'  label={actionsLabel.refresh} onClick={onRefresh} icon={<Autorenew/>} aria-label="Refresh"/>}
    {onExportToExcel && !!actionsLabel.exportToExcel &&
                    <InlineIconButton name='exportToExcel' label={actionsLabel.exportToExcel} onClick={onExportToExcel} icon={<FileDownload/>} aria-label="ExportToExcel"/>}
}

<Wrapper onRefresh={()=> {}} onExportToExcel ={()=> {}} actionLabel={refresh: 'refresh', exportToExcel: 'export'}>

Upvotes: 1

Views: 139

Answers (2)

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10307

Maybe do something like:

const EXPORT_EXCEL = { 
  key: "EXPORT_EXCEL", 
  label: "export",
  ariaLabel: "Export Excel",
  icon: <Autorenew/>,
  handler: params => { /* your function */ }
};
const REFRESH = { 
  key: "REFRESH", 
  label: "refresh",
  ariaLabel: "Refresh",
  icon: <FileDownload/>,
  handler: params => { /* your function */ } 
};

<Wrapper type={EXPORT_EXCEL} />;

const Wrapper = ({ type }) => {
      return <InlineIconButton name={type.key} label={type.label} onClick={type.handler} icon={type.icon} aria-label={type.ariaLabel ? type.ariaLabel : type.label} />;
  }
}

You even the possiblity to throw those EXPORT_EXCEL and REFRESH into array. Instead of having them loose put them in an array like so:

const BUTTONS = [
  { 
    key: "EXPORT_EXCEL", 
    label: "export",
    ariaLabel: "Export Excel",
    icon: <Autorenew/>,
    handler: params => { /* your function */ }
  },
  { 
    key: "REFRESH", 
    label: "refresh",
    ariaLabel: "Refresh",
    icon: <FileDownload/>,
    handler: params => { /* your function */ } 
  },
];

And then loop through to create the Wrapper.

But then it's really up to you and your preferences and app's requirements

Upvotes: 2

Itamar Arjuan
Itamar Arjuan

Reputation: 36

The entire idea behind React is to be able to create a unique component for every kind of usage. That is the entire philosophy behind React composability. Don't understand why would you want to wrap it.

Upvotes: 0

Related Questions