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.

Practice

1. What is the main purpose of using a POST request with the Fetch API in React Native?

easy

A. To delete data from the app

B. To retrieve data from a server

C. To send data from the app to a server

D. To update the app's local state only

Solution

1. Step 1: Understand POST request purpose

   POST requests are used to send data to a server, unlike GET which retrieves data.

2. Step 2: Match Fetch API usage

   Using Fetch with method 'POST' means sending data from the app to the server.

3. Final Answer:

   To send data from the app to a server -> Option C

4. Quick Check:

   POST request = send data [OK]

Hint: POST means sending data to server, not just getting it [OK]

Common Mistakes:

• Confusing POST with GET method
• Thinking POST only updates local state
• Assuming POST deletes data

2. Which of the following is the correct way to specify a POST request using Fetch API in React Native?

easy

A. fetch(url, { method: 'POST' })

B. fetch(url, { method: 'GET' })

C. fetch(url, { method: 'PUT' })

D. fetch(url, { method: 'DELETE' })

Solution

1. Step 1: Identify HTTP method for POST

   The method property in Fetch options must be 'POST' to send data.

2. Step 2: Check options object

   Only fetch(url, { method: 'POST' }) uses method: 'POST' correctly.

3. Final Answer:

   fetch(url, { method: 'POST' }) -> Option A

4. Quick Check:

   Fetch POST syntax = method: 'POST' [OK]

Hint: Use method: 'POST' exactly to send data [OK]

Common Mistakes:

• Using method: 'GET' for sending data
• Confusing PUT or DELETE with POST
• Omitting the method property

3. What will be the output of this code snippet in React Native?

fetch('https://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John' })
})
.then(response => response.json())
.then(data => console.log(data.message))
.catch(error => console.error(error));

Assuming the server responds with {"message": "Success"}.

medium

A. Throws a syntax error

B. Logs undefined to the console

C. Logs the entire response object

D. Logs 'Success' to the console

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch call sends a POST request with JSON body and parses the JSON response.

2. Step 2: Check console.log output

   Since server returns {"message": "Success"}, data.message is 'Success', so it logs 'Success'.

3. Final Answer:

   Logs 'Success' to the console -> Option D

4. Quick Check:

   response.json() = parsed JSON, data.message = 'Success' [OK]

Hint: response.json() parses JSON, then access properties [OK]

Common Mistakes:

• Not parsing response as JSON
• Logging response instead of data.message
• Syntax errors in JSON.stringify

4. Identify the error in this React Native POST request code:

fetch('https://api.example.com/data', {
  method: 'POST',
  body: { name: 'Alice' }
})

medium

A. Missing headers for content type

B. body should be a JSON string, not an object

C. method should be 'GET' instead of 'POST'

D. URL is invalid

Solution

1. Step 1: Check body format in fetch POST

   The body must be a string, usually JSON stringified, not a plain object.

2. Step 2: Identify missing JSON.stringify

   Here, body is an object { name: 'Alice' } which causes an error; it should be JSON.stringify({ name: 'Alice' }).

3. Final Answer:

   body should be a JSON string, not an object -> Option B

4. Quick Check:

   body = JSON.stringify(object) [OK]

Hint: Always JSON.stringify body for POST requests [OK]

Common Mistakes:

• Passing object directly as body
• Forgetting Content-Type header
• Using wrong HTTP method

5. You want to send user data with a POST request and handle errors gracefully in React Native. Which code snippet correctly implements this with async/await and error handling? A)

async function sendData() {
  try {
    const response = await fetch('https://api.example.com/user', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: 'user1' })
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

B)

async function sendData() {
  const response = fetch('https://api.example.com/user', {
    method: 'POST',
    body: { username: 'user1' }
  });
  const data = response.json();
  console.log(data);
}

C)

function sendData() {
  fetch('https://api.example.com/user', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'user1' })
  })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(error => console.error(error));
}

D)

async function sendData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

hard

A. Correct async/await POST with JSON body and error handling

B. Missing await and body is not stringified

C. Uses then but parses response as text, not JSON

D. No POST method or body specified

Solution

1. Step 1: Check async/await usage and POST setup

   Correct async/await POST with JSON body and error handling uses async/await correctly, sets method to 'POST', includes headers, and stringifies body.

2. Step 2: Verify error handling and response parsing

   Correct async/await POST with JSON body and error handling has try/catch for errors and parses response as JSON, then logs data.

3. Final Answer:

   Correct async/await POST with JSON body and error handling -> Option A

4. Quick Check:

   Async POST with try/catch = Correct async/await POST with JSON body and error handling [OK]

Hint: Use async/await with try/catch and JSON.stringify body [OK]

Common Mistakes:

• Not awaiting fetch or response.json()
• Not stringifying body object
• Missing headers for JSON content
• Not handling errors