How to call API using react js

Question

i am new in react. Can anyone help me that How to call API using react js and show the response in page. I am trying the following code but getting error.

export default class UserList extends React.Component {
    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({users});
            })
    }
    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

What is the error you get?

Utsav Patel
– Utsav Patel

2020-04-25 11:31:00 +00:00
Commented Apr 25, 2020 at 11:31 — Utsav Patel
– Utsav Patel, Commented Apr 25, 2020 at 11:31

Khabir · Accepted Answer · 2020-04-25 11:31:05Z

4

Hi you missed to declare the state. you need to declare it in UserList Component. Please follow this example:

import React from 'react';
import axios from 'axios';

export default class UserList extends React.Component {
    state = {
        users: []
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({users});
            })
    }

    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

answered Apr 25, 2020 at 11:31

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md. Saifur Rahman · Accepted Answer · 2024-08-20 11:09:17Z

create apiService.tsx file seperately

import axios from "axios";
import { store } from '../redux/store'
import { USER_LOGOUT } from '../redux/action'

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const NODE_API_BASE_URL = import.meta.env.VITE_NODE_API_BASE_URL;

axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.post['Content-Type'] = 'application/json'

export const getCall = async (path, data, token = null, headers = {}) => {
    try {
        const res = await axios.get(API_BASE_URL + path, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
            params: data
        })

        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                // alert(JSON.stringify(res))
                localStorage.removeItem('user')
                localStorage.removeItem('roles')
                localStorage.removeItem('permissions')
                store.dispatch(USER_LOGOUT())
                logout_cleaner()
            }
            return res?.data
        } else {
            return res?.data;
        }

    } catch (error) {
        console.log("error", error);
        return {};
    }
};

export const putCall = async (path, data, token = null, headers = {}) => {
    try {
        const res = await axios.put(API_BASE_URL + path, data, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
        });
        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                localStorage.removeItem('user');
                localStorage.removeItem('roles');
                localStorage.removeItem('permissions');
                store.dispatch(USER_LOGOUT());
                logout_cleaner();
            }
            return res?.data;
        } else {
            return res?.data;
        }
    } catch (error) {
        console.log("error", error);
        return {};
    }
};


export const postCall = async (path, data, token = null, headers = {}) => {
    try {
        // alert(path+' '+token)
        const res = await axios.post(API_BASE_URL + path, data, {
            headers: {
                Authorization: token ? `Bearer ${token}` : "",
                ...headers
            },
        });
        if (res?.data?.code != 200) {
            if ([401, 403]?.includes(res?.data?.code)) {
                // alert(JSON.stringify(res))
                localStorage.removeItem('user')
                localStorage.removeItem('roles')
                localStorage.removeItem('permissions')
                store.dispatch(USER_LOGOUT())
                logout_cleaner()
            }
            return res?.data
        } else {
            return res?.data;
        }

    } catch (error) {
        console.log("error", error);
        return {};
    }
};

Make Call: GET method

const getFilterList = async () => {
        const response = await getCall(HANDSET_USER_FILTER_DATA, null, props?.user?.access_token)
        if (response?.code === 200) {
            setFormData((prev) => ({
                ...prev,
                filter: { ...prev.filter, list: { ...prev.filter?.list, ...response?.data } }
            }))
        }
    }

Make Call: POST & PUT method

const handleSubmit = async (e: any) => {
        if (e && e.preventDefault) {
            e.preventDefault();
        }
        formData?.form?.submit?.loading
        setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: true } } }))

        const request = { ...formData?.form?.data, id: formData?.form?.data?.id }
        let response;
        if (formData?.form?.data?.id) {
            response = await putCall(UPDATE_HANDSET_USER, request, props.user.access_token)
        }
        else {
            response = await postCall(CREATE_HANDSET_USER, request, props.user.access_token)
        }
        if (response?.code === 200) {
            getTableData(null, { ...formData?.filter?.data, page: formData?.table?.paginator?.current_page, sort:formData?.table?.sort  })
            formClear()
            toast.success(response?.message?.[0])
            closeDialog()
            setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: false } } }))
        } else {
            toast.error(response?.message?.[0])
            setFormData((prev) => ({ ...prev, form: { ...prev?.form, submit: { ...prev?.form?.submit, loading: false } } }))
        }
    }

Collectives™ on Stack Overflow

How to call API using react js

2 Answers 2

Comments

create apiService.tsx file seperately

Make Call: GET method

Make Call: POST & PUT method

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

create apiService.tsx file seperately

Make Call: GET method

Make Call: POST & PUT method

Comments

Your Answer

Sign up or log in

Post as a guest

Related