Fetch API for GET requests in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from the URL using fetch.

React Native

fetch('[1]')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Drag options to blanks, or click blank then click option'

A"https://api.example.com/data"

Bresponse.json

Cconsole.log

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the URL in quotes.

Passing a function instead of a URL.

The fetch function needs the URL string as its first argument to make a GET request.

2fill in blank

medium

Complete the code to convert the fetch response to JSON.

React Native

fetch('https://api.example.com/data')
  .then(response => response.[1]())
  .then(data => console.log(data));

Drag options to blanks, or click blank then click option'

AformData

Btext

Cblob

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() instead of response.json().

Forgetting to call the method with parentheses.

The response.json() method parses the response body as JSON.

3fill in blank

hard

Fix the error in the fetch call to handle errors properly.

React Native

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .[1](error => console.error('Error:', error));

Drag options to blanks, or click blank then click option'

Afinally

Bthen

Ccatch

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch for error handling.

Not handling errors at all.

The catch method handles errors in the fetch promise chain.

4fill in blank

hard

Fill both blanks to create a React Native component that fetches data on button press.

React Native

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

export default function FetchExample() {
  const [data, setData] = useState(null);

  const fetchData = () => {
    fetch('https://api.example.com/data')
      .then(response => response.[1]())
      .then(json => setData(json))
      .catch(error => console.error(error));
  };

  return (
    <View>
      <Button title="Fetch Data" onPress=[2] />
      {data && <Text>{JSON.stringify(data)}</Text>}
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Ajson

BfetchData()

CfetchData

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Calling fetchData() inside onPress instead of passing the function.

Using response.text() instead of response.json().

response.json() converts the response to JSON.
The onPress prop needs the function reference fetchData without parentheses.

5fill in blank

hard

Fill all three blanks to fetch data and display loading status in React Native.

React Native

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

export default function FetchWithLoading() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchData = () => {
    setLoading([1]);
    fetch('https://api.example.com/data')
      .then(response => response.[2]())
      .then(json => {
        setData(json);
        setLoading([3]);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  };

  return (
    <View>
      <Button title="Fetch Data" onPress={fetchData} />
      {loading ? <Text>Loading...</Text> : data && <Text>{JSON.stringify(data)}</Text>}
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Atrue

Bjson

Cfalse

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Not setting loading to true before fetch.

Using response.text() instead of response.json().

Not setting loading to false after fetch.

Set loading to true before fetch starts.
Use response.json() to parse.
Set loading to false after data is received.