CODEWITHSUNDEEP
react-adminadmin-on-rest
md shoaib
md shoaib

Reputation: 135

React-admin implementation

I am very new to react-admin and having trouble to get the data on to the screen. After i read the documentation, this was how i implemented my code. I am able to get the data in the console.log of useEffect which is array of objects having object keys like id, fullName, emailId. but I am not able to get the data into the list so that the textfield recieves the data and display it on the screen.

import * as React from "react";
import { useDataProvider } from 'react-admin';
import axios from 'axios'
import { List, Datagrid, TextField } from 'admin-on-rest/lib/mui';

const AllUsers = (props) => {

    const dataProvider = useDataProvider()
    let [result, setResult] = React.useState("")

    //const restClient = restProvider(data, true);


    React.useEffect(async () => {
        try {
            let resp = await dataProvider.getList("allUsers",{ pagination: {  },
            sort: { },
            filter: {  },})
            console.log(resp.data)
        }
        catch (err) {
            console.log(err)
        }

    }, []);

    

    return (
        <>
                <List {...props}>
                    <Datagrid>
                        <TextField source="id" sortable={false} />
                        <TextField source="emailId" />
                        <TextField source="fullname" />
                    </Datagrid>
                    
                </List>
         
        </>
    );

}
export default AllUsers;

And this is how I am passing the props to AllUsers component

import * as React from "react";
import { render } from 'react-dom';
import { Admin, Resource, ListGuesser,AuthProvider } from 'react-admin';
import restProvider from 'ra-data-json-server';
import  AllUsers from "./components/allUsers"

const dataProvider = restProvider('http://localhost/users');


const App = () => {
  return (
    <Admin  dataProvider={dataProvider}>
      <Resource name="allUsers" list={AllUsers} />
    </Admin>
  );

}
export default App;

Upvotes: 1

Views: 292

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

Why are you importing things from admin-on-rest ? Import everything from react-admin.

Besides, you don't need to fetch data yourself using hooks. It's already done by react-admin directly. I advise you to follow the tutorial first.

Upvotes: 1

Related Questions