Ad

Set Different Paths To Buttons

- 1 answer

I am using react-admin framework and I am trying to set two different paths to two different <EditButton/>.

So far I have created my custom component, that renders buttons as the actions component.

For example, I want one button to have a path to edit/somepath and the other button to have a default edit path /edit.

So far I have tried this:

   var getId = this.props.data;
   if (getId !== undefined) {
    var yey = getId["id"];
   }
   return (
    <CardActions>
     {bulkActions && React.cloneElement(bulkActions, {
      basePath,
      filterValues,
      resource,
      selectedIds,
      onUnselectItems
     })}
     <EditButton basePath={basePath}/>
     <EditButton
      label="Upravit JSON"
      basePath={yey}
     />
    </CardActions>
   );

The first button, which should have the simple /edit path now redirects to /basePath/undefined. And the second button redirects to basePath/edit/somepath/edit/somepath/undefined which I found really weird since my variable yey stores only string edit/somepath.

I am really stuck here, so any help would be appreciated.

Thank you in advance.

Ad

Answer

I have never used react-admin, but looking at the repo and source code, the component looks like that:

const EditButton = ({
  basePath = '',
  label = 'ra.action.edit',
  record = {},
  icon = <ContentCreate />,
  ...rest
}) => (
  <Button
    component={Link}
    to={linkToRecord(basePath, record.id)}
    label={label}
    onClick={stopPropagation}
    {...rest}
>
    {icon}
  </Button>
);

So it looks like the to property concatenates your basePath and a record.id from the props - I am guessing that is what's missing in your code!

Hope that helps!

Ad
source: stackoverflow.com
Ad