Create multiple resources from the same endpoint in React Admin to have different filters applied

Question

I need to create different routes in React admin, all based on the same endpoint but with a different filter. My need is that I need a Menu entry to show all properties with status = approved, all properties with status = review and so on. I tried doing this:

export default function App() {
  return (
    <Admin
      loginPage={CustomLoginPage}
      dataProvider={dataProvider}
      authProvider={authProvider}
    >
      <Resource
        name="properties"
        options={{ label: 'Properties in review' }}
        icon={UserIcon}
        list={PropertyReviewList}
        show={PropertyShow}
        edit={PropertyEdit}
      />
      <Resource
        name="properties"
        options={{ label: 'Properties Approved' }}
        icon={UserIcon}
        list={PropertyApprovedList}
        show={PropertyShow}
        edit={PropertyEdit}
      />
    </Admin>
  );
}

but this is not working as only the last defined property is showing. What is the best way to achieve what I am trying to achieve?

Marat · Accepted Answer · 2022-06-22 04:20:53Z

1

If I understood you correctly, you need a component that renders different data depending on some part of the link that can change.

This can be achieved using query params. Here is an interactive code example from react router docs that does what you need: https://v5.reactrouter.com/web/example/query-parameters

So, you will have a link for your page like "/properties?status=review" where status is the query param. You check it in your component to show data depending on its value

answered Jun 22, 2022 at 4:20

Marat

6291 gold badge7 silver badges10 bronze badges

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

Comments

codeVibek · Accepted Answer · 2022-06-22 04:30:07Z

0

status = approved, all properties with status = review

Enter these properties in query. Example:

axios.get("/api/...?status=approved")
axios.get("/api/...?status=review")

Makes these api calls where you need it. You can have a single controller in backend to handle both the requests.

answered Jun 22, 2022 at 4:30

codeVibek

1163 silver badges9 bronze badges

Collectives™ on Stack Overflow

Create multiple resources from the same endpoint in React Admin to have different filters applied

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related