How to add custom action in react-admin

user_14448025 0
Viewed 573

I use react-admin, and need to add a custom button to my list view that will navigate to a specific API.

My questions:

  1. How to create the button? what shuold i write in my list?
  2. How to navigate it to the API?

Thanks

react-admin
1 Answers

My way of solving this:

  1. create custom button:

     import Button from '@material-ui/core/Button';
 import { TopToolbar } from 'react-admin';

 const PostShowActions = ({ basePath, data, resource }) => (
 <TopToolbar>
     {/* Add your custom actions */}
     <Button color="primary" onClick={customAction}>Custom Action</Button>
 </TopToolbar>
 );

 export const PostList = (props) => (
 <List actions={<PostShowActions />} {...props}>
     ...
 </List
 );

  2. navigate it to the API: I implemented customAction like this:

    const genarte = () => {
    const httpClient = fetchUtils.fetchJson;
    const apiUrl = "your API";
    httpClient(`${apiUrl}`,{method: "POST"}).then(({ json }) => ({
                data: json,
              })

    ); };

I know it doesnt navigate the page to external link only make a http request, but now for my need its ok.

if you have any comment or idea how to navigate the page to extranl link I would be happy

user_144480250
Related