React and TypeScript—which types for an Axios response?

by

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 );
        });

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>
    );
};

More Related Contents:

  1. axios post request to send form data
  2. PropTypes in a TypeScript React Application
  3. How to use refs in React with Typescript
  4. Attach Authorization header for all axios requests
  5. Typescript input onchange event.target.value
  6. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  7. Axios having CORS issue
  8. Typescript image import
  9. Handling async request with React, Redux and Axios?
  10. mobx-react observer don’t fires when I set observable
  11. Sending the bearer token with axios
  12. Set types on useState React Hook with TypeScript
  13. Axios get in url works but with second parameter as object it doesn’t
  14. Importing images in TypeScript React – “Cannot find module”
  15. How to type a page component with props in Next.js?
  16. What does the colon mean in Javascript after function?
  17. React Hooks – Modified state not reflecting immediately
  18. React Hooks – Modified state not reflecting immediately
  19. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  20. React with Typescript — Generics while using React.forwardRef
  21. Is it possible to limit children to specific components using React with TypeScript?
  22. is it possible to React.useState(() => {}) in React?
  23. How do I type this ‘as’ JSX attribute in TypeScript?
  24. Typescript React: Access component property types
  25. How to assign the correct typing to React.cloneElement when giving properties to children?
  26. Disable ESLint that create-react-app provides
  27. Webpack & Typescript image import
  28. react native post form data with object and file in it using axios
  29. ‘React’ was used before it was defined
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment