React and Typescript, which types for Axios response?

Question

I am trying to present a simple user list from an API which returns this:

[{"UserID":2,"FirstName":"User2"},{"UserID":1,"FirstName":"User1"}] 

I do not understand fully how to handle Axios responses with types. The Typescript error is

Type '{} | { id: number; firstName: string; }' is not assignable to type 'IntrinsicAttributes & UserListProps & { children?: ReactNode; }'. Property 'items' is missing in type '{}' but required in type 'UserListProps'. 

from the <UserList /> element in the Users.tsx file below. Is my User interface wrong?

import React, {useEffect, useState, Fragment } from 'react'; import UserList from './UserList'; import axios, {AxiosResponse} from 'axios';  interface User {     id: number;     firstName: string; }  const Users: React.FC = (props) => {     const [users, setUserList] = useState<User>();      useEffect(() => {         // Use [] as second argument in useEffect for not rendering each time         axios.get('http://localhost:8080/admin/users')         .then((response: AxiosResponse) => {             console.log(response.data);             setUserList( response.data );         });     }, []);      return (         <Fragment>             <UserList {...users} />         </Fragment>      ); }; export default Users; 

Below is my UserList.tsx.

import React, {Fragment } from 'react';  interface UserListProps {     items: {id: number, firstName: string}[]; };  const UserList: React.FC<UserListProps> = (props) => {     return (         <Fragment>             <ul>             {props.items.map(user => (                 <li key={user.id}>                     <span>{user.firstName}</span>                     {/* not call delete function, just point to it                     // set this to null in bind() */}                 </li>             ))}             </ul>         </Fragment>     ); };  export default UserList; 

Answer 1

There is generic get method defined in axios/index.d.ts

get<T = never, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig<T>): Promise<R>; 

Example

interface User {     id: number;     firstName: string; }   axios.get<User[]>('http://localhost:8080/admin/users')         .then(response => {             console.log(response.data);             setUserList( response.data );         }); 

--Edit

I think you are passing list the wrong way to child component.

const [users, setUserList] = useState<User[]>([]); 

<UserList items={users} /> 

interface UserListProps {     items: User[]; }; 

const UserList: React.FC<UserListProps> = ({items}) => {     return (         <Fragment>             <ul>             {items.map(user => (                 <li key={user.id}>                     <span>{user.firstName}</span>                 </li>             ))}             </ul>         </Fragment>     ); };