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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a POST request using fetch.

React Native

fetch('https://example.com/api/data', {
  method: '[1]',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John' })
})

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

AGET

BPUT

CDELETE

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST will not send data in the request body.

Forgetting to set the method property causes a GET request by default.

The method property must be set to POST to send data to the server.

2fill in blank

medium

Complete the code to parse the JSON response from the fetch POST request.

React Native

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ age: 30 })
})
.then(response => response.[1]())

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

AformData

Bjson

Cblob

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() will return raw text, not parsed JSON.

Forgetting to call a method to parse the response causes errors when accessing data.

Use response.json() to convert the response body to a JavaScript object.

3fill in blank

hard

Fix the error in the fetch POST request to correctly send JSON data.

React Native

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: [1]
})

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

AJSON.stringify({ name: 'Alice' })

B{ name: 'Alice' }

CJSON.parse({ name: 'Alice' })

D'{ name: "Alice" }'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an object directly to body causes a TypeError.

Using JSON.parse on an object is incorrect; it parses strings.

The body must be a JSON string, so use JSON.stringify() to convert the object.

4fill in blank

hard

Fill both blanks to handle the fetch POST response and catch errors.

React Native

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ score: 100 })
})
.then(response => response.[1]())
.then(data => console.log(data))
.catch(error => [2])

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

Ajson

Bconsole.error(error)

Cconsole.log(error)

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() instead of response.json() causes data to be raw text.

Not logging errors or using console.log instead of console.error reduces error visibility.

Use response.json() to parse the response, and console.error(error) to log errors.

5fill in blank

hard

Fill all three blanks to create a React Native function that sends a POST request and updates state with the response.

React Native

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

export default function App() {
  const [message, setMessage] = useState('');

  const sendData = () => {
    fetch('https://example.com/api/message', {
      method: '[1]',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: 'Hello' })
    })
    .then(response => response.[2]())
    .then(data => setMessage(data.[3]))
    .catch(error => console.error(error));
  };

  return (
    <View>
      <Button title="Send" onPress={sendData} />
      <Text>{message}</Text>
    </View>
  );
}

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

APOST

Bjson

Cmessage

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST will not send data.

Forgetting to parse JSON causes errors accessing data.

Using wrong property name from response data causes undefined message.

The method must be POST. Use response.json() to parse the response. Then update state with data.message.