CODEWITHSUNDEEP
javascriptreactjsreact-admin
Ahmed Fouzan
Ahmed Fouzan

Reputation: 104

react-admin List displays only one row

I've just started using react-admin.

The following is App.js file

// App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

import { UserList } from './users';

const dataProvider = jsonServerProvider('http://localhost:3000/');

const App = () => (
    <Admin
        title={"Sample App"}
        dataProvider={dataProvider}
    >
        <Resource name="users" list={UserList} />
    </Admin>
);

export default App;

UserList.js

// UserList.js
import React from 'react';
import { List, Datagrid, TextField, NumberField } from 'react-admin';

export const UserList = (props) => (
    <List
        {...props}
        sort={{ field: 'id', order: 'DESC' }}
        perPage={25}
    >
        <Datagrid>
            <TextField source="name" />
            <NumberField source="age" />
        </Datagrid>
    </List>
);

Though the page size is set to 25, only 1 record is displayed per page. I see all the 25 records being fetched from the API for each page.

sample

Please help me if there is anything that I am missing.

Upvotes: 0

Views: 1233

Answers (2)

Marcos Vinicius Rogowski
Marcos Vinicius Rogowski

Reputation: 73

Make sure the ID field name returned by your API is 'id'.

Upvotes: 2

Hydrock
Hydrock

Reputation: 133

you used -> jsonServerProvider('http://localhost:3000/')

you must try jsonServerProvider('http://jsonplaceholder.typicode.com');

or give code link

Upvotes: 0

Related Questions