Axios library in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when fetching data with Axios in React Native?

Consider this React Native component using Axios to fetch user data on button press. What will be displayed after pressing the button?

React Native

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import axios from 'axios';

export default function UserFetcher() {
  const [user, setUser] = useState(null);
  const fetchUser = () => {
    axios.get('https://jsonplaceholder.typicode.com/users/1')
      .then(response => setUser(response.data))
      .catch(() => setUser({ name: 'Error' }));
  };
  return (
    <View>
      <Button title="Fetch User" onPress={fetchUser} />
      <Text>{user ? user.name : 'No user loaded'}</Text>
    </View>
  );
}

A Initially blank, then shows 'Error' after button press

B Shows 'No user loaded' always, button press does nothing

C Initially shows 'No user loaded', then after button press shows 'Leanne Graham'

D Shows 'No user loaded' initially, then blank after button press

💡 Hint

Think about what the Axios call returns and how state updates the displayed text.

The component starts with user as null, so it shows 'No user loaded'. When the button is pressed, Axios fetches user data and sets user to the response. The user name 'Leanne Graham' is then displayed.

❓ lifecycle

intermediate

When does Axios fetch data in this React Native component?

Given this component, when is the Axios GET request triggered?

React Native

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

export default function DataLoader() {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setData(response.data))
      .catch(() => setData({ title: 'Error' }));
  }, []);
  return <View><Text>{data ? data.title : 'Loading...'}</Text></View>;
}

A When the component unmounts

B Only once when the component first mounts

C Every time the component re-renders

D When the user presses a button

💡 Hint

Look at the dependency array in useEffect.

The empty dependency array [] means the effect runs only once after the component mounts, triggering the Axios GET request once.

📝 Syntax

advanced

Which Axios call correctly sends JSON data in a POST request?

Choose the correct Axios POST request syntax to send JSON data { name: 'John' } to the endpoint.

A axios.post('https://api.example.com/users', { name: 'John' })

B axios.post('https://api.example.com/users', JSON.stringify({ name: 'John' }))

C axios.post('https://api.example.com/users', { name: 'John' }, { headers: { 'Content-Type': 'text/plain' } })

D axios.post('https://api.example.com/users', null, { data: { name: 'John' } })

💡 Hint

Axios automatically sets the correct headers and stringifies the data object.

Option A correctly passes the data object directly. Axios sets the Content-Type to application/json and stringifies the object automatically. Option A sends a string but Axios expects an object. Option A sets wrong headers. Option A misuses the config object.

🔧 Debug

advanced

Why does this Axios request cause a runtime error?

Examine this code snippet. What causes the runtime error?

React Native

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.log(error.message);
  }
}

fetchData();

A The function fetchData is not awaited or handled properly

B Missing import of React in the file

C axios.get URL is missing protocol

D Using await outside an async function

💡 Hint

Look at how fetchData is called.

The function fetchData is async but called without awaiting or handling its promise. This can cause unhandled promise rejections or unexpected behavior. The code itself is valid but best practice is to await or handle the promise.

🧠 Conceptual

expert

What is the effect of setting Axios interceptors in React Native?

Which statement best describes the purpose of Axios interceptors in a React Native app?

A They convert all Axios calls to fetch API calls internally

B They automatically retry failed requests without any code

C They cache all responses locally to improve performance

D They allow modifying requests or responses globally before they are handled by then or catch

💡 Hint

Think about how interceptors can change requests or responses.

Axios interceptors let you add code to run before a request is sent or before a response is handled. This is useful for adding headers, logging, or error handling globally. They do not automatically retry, cache, or convert calls.

Practice

1. What is the main purpose of using the Axios library in a React Native app?

easy

A. To make HTTP requests to fetch or send data

B. To style components with CSS

C. To manage app navigation between screens

D. To store data locally on the device

Solution

1. Step 1: Understand Axios functionality

   Axios is a library designed to simplify making HTTP requests like GET and POST.

2. Step 2: Identify Axios use in React Native

   It helps fetch data from servers or send data to them, which is essential for dynamic apps.

3. Final Answer:

   To make HTTP requests to fetch or send data -> Option A

4. Quick Check:

   Axios = HTTP requests [OK]

Hint: Axios is for internet requests, not styling or navigation [OK]

Common Mistakes:

• Confusing Axios with styling libraries
• Thinking Axios manages navigation
• Assuming Axios stores data locally

2. Which of the following is the correct syntax to make a GET request using Axios in React Native?

easy

A. axios.fetch('https://api.example.com/data')

B. axios.get('https://api.example.com/data')

C. axios.post('https://api.example.com/data')

D. axios.request('https://api.example.com/data')

Solution

1. Step 1: Recall Axios GET method

   The correct method to fetch data is axios.get(url).

2. Step 2: Check other options

   axios.fetch is not a valid Axios method, axios.post sends data, and axios.request is more generic but requires config.

3. Final Answer:

   axios.get('https://api.example.com/data') -> Option B

4. Quick Check:

   GET request = axios.get() [OK]

Hint: Use axios.get() for fetching data [OK]

Common Mistakes:

• Using axios.fetch which does not exist
• Confusing get with post method
• Using axios.request without config object

3. What will be logged to the console after this Axios GET request succeeds?

axios.get('https://api.example.com/user')
  .then(response => console.log(response.data.name))
  .catch(error => console.log('Error'));

Assuming the server responds with { "name": "Alice" }.

medium

A. response

B. Error

C. Alice

D. undefined

Solution

1. Step 1: Understand Axios response structure

   Axios returns a response object where the actual data is inside response.data.

2. Step 2: Access the name property

   The code logs response.data.name, which is "Alice" from the server response.

3. Final Answer:

   Alice -> Option C

4. Quick Check:

   response.data.name = Alice [OK]

Hint: Access data via response.data in Axios [OK]

Common Mistakes:

• Logging response instead of response.data
• Expecting data directly without .data
• Not handling promise with then/catch

4. Identify the error in this Axios POST request code snippet:

axios.post('https://api.example.com/login',
  { username: 'user1', password: 'pass123' }
).then(response => {
  console.log('Login successful');
}).catch(error => {
  console.log('Login failed');
});

medium

A. No error, code is correct

B. Missing await keyword for async call

C. Incorrect URL format

D. POST data should be a string, not an object

Solution

1. Step 1: Review Axios POST syntax

   Axios.post takes URL and data object as parameters, which is correct here.

2. Step 2: Check for syntax or usage errors

   The code uses promise chaining with then/catch correctly; await is optional.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Axios.post with object data is valid [OK]

Hint: Axios.post accepts object data without await [OK]

Common Mistakes:

• Thinking await is mandatory with then/catch
• Assuming data must be JSON stringified manually
• Confusing URL format with error

5. You want to fetch user data and show a loading message while waiting. Which code snippet correctly uses Axios with React Native hooks to handle loading and errors?

hard

A. const [loading, setLoading] = useState(false);
useEffect(() => {
axios.get('/user')
.then(() => setLoading(false))
.catch(() => setLoading(false));
}, []);

B. const [loading, setLoading] = useState(false);
useEffect(() => {
axios.get('/user')
.then(() => setLoading(true))
.catch(() => setLoading(false));
}, []);

C. const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
axios.get('/user')
.then(() => setLoading(true))
.catch(() => setLoading(false));
}, []);

D. const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
axios.get('/user')
.then(() => setLoading(false))
.catch(() => setLoading(false));
}, []);

Solution

1. Step 1: Initialize loading state correctly

   Loading should start as false, then set to true when request starts.

2. Step 2: Set loading true before Axios call and false after response or error

   This ensures UI shows loading while waiting and hides it after.

3. Final Answer:

   Initialize loading false, set true before request, false after -> Option D

4. Quick Check:

   Loading true during request = const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); axios.get('/user') .then(() => setLoading(false)) .catch(() => setLoading(false)); }, []); [OK]

Hint: Set loading true before request, false after response [OK]

Common Mistakes:

• Starting loading as true but not setting it properly
• Setting loading true after request finishes
• Not handling loading state at all