title: React and TypeScript—which types for an Axios response?
body: <p>I am trying to present a simple user list from an API which returns this:</p>
  <pre><code>[{&quot;UserID&quot;:2,&quot;FirstName&quot;:&quot;User2&quot;},{&quot;UserID&quot;:1,&quot;FirstName&quot;:&quot;User1&quot;}]
  </code></pre>
  <p>I do not understand fully how to handle Axios responses with types. The TypeScript error is</p>
  <blockquote>
  <p>Type '{} | { id: number; firstName: string; }' is not assignable to type 'IntrinsicAttributes &amp; UserListProps &amp; { children?: ReactNode; }'.</p>
  <p>Property 'items' is missing in type '{}' but required in type 'UserListProps'.</p>
  </blockquote>
  <p>from the <code>&lt;UserList /&gt;</code> element in the <code>Users.tsx</code> file below. Is my <code>User</code> interface wrong?</p>
  <pre><code>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) =&gt; {
      const [users, setUserList] = useState&lt;User&gt;();
  
      useEffect(() =&gt; {
          // Use [] as second argument in useEffect for not rendering each time
          axios.get('http://localhost:8080/admin/users')
          .then((response: AxiosResponse) =&gt; {
              console.log(response.data);
              setUserList( response.data );
          });
      }, []);
  
      return (
          &lt;Fragment&gt;
              &lt;UserList {...users} /&gt;
          &lt;/Fragment&gt;
  
      );
  };
  export default Users;
  </code></pre>
  <p>Below is my <code>UserList.tsx</code>.</p>
  <pre><code>import React, {Fragment } from 'react';
  
  interface UserListProps {
      items: {id: number, firstName: string}[];
  };
  
  const UserList: React.FC&lt;UserListProps&gt; = (props) =&gt; {
      return (
          &lt;Fragment&gt;
              &lt;ul&gt;
              {props.items.map(user =&gt; (
                  &lt;li key={user.id}&gt;
                      &lt;span&gt;{user.firstName}&lt;/span&gt;
                      {/* not call delete function, just point to it
                      // set this to null in bind() */}
                  &lt;/li&gt;
              ))}
              &lt;/ul&gt;
          &lt;/Fragment&gt;
      );
  };
  
  export default UserList;
  </code></pre>