Fetch API for POST requests in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this React Native fetch POST request runs?

Consider this React Native code snippet that sends a POST request. What will be the value of response.status if the server accepts the request successfully?

React Native

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

A 200

B 404

C 500

D 201

💡 Hint

A successful POST request usually returns a status code in the 200 range.

The fetch POST request sends data to the server. If the server accepts it successfully, it usually responds with status 200 (OK) or 201 (Created). Since this example does not specify server behavior, 201 is the most appropriate success code for a POST that creates a resource.

📝 Syntax

intermediate

Which option correctly formats the fetch POST request body?

You want to send JSON data in a POST request using fetch in React Native. Which option correctly sets the body property?

A body: JSON.stringify({ username: 'bob' })

B body: { username: 'bob' }

C body: JSON.parse('{"username":"bob"}')

D body: 'username=bob'

💡 Hint

The body must be a string when sending JSON data.

The fetch API requires the body to be a string for JSON data. JSON.stringify converts the object to a JSON string. Option A passes an object directly, which causes an error. Option A parses a string to an object, which is wrong. Option A sends a plain string not JSON.

❓ lifecycle

advanced

What is the correct way to handle fetch POST request errors in React Native?

You want to catch network or server errors when sending a POST request with fetch. Which code snippet correctly handles errors?

React Native

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ user: 'test' })
})
.then(response => {
  if (!response.ok) throw new Error('Server error');
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error.message));

A It catches both network errors and server response errors correctly.

B It only catches network errors, not server errors.

C It does not catch any errors because fetch never throws.

D It catches errors but does not parse JSON correctly.

💡 Hint

Check how response.ok is used to detect server errors.

fetch only rejects on network errors. To catch server errors (like 404 or 500), you must check response.ok and throw an error manually. This code does both, so it handles all errors properly.

❓ navigation

advanced

After a successful POST request, how to navigate to another screen in React Native?

You send a POST request to login a user. After success, you want to navigate to the Home screen. Which code snippet correctly does this using React Navigation?

React Native

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'user', password: 'pass' })
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    // Navigate to Home
  }
})
.catch(error => console.error(error));

A navigate('Home');

B navigation.navigate('Home');

C Navigation.push('Home');

D this.props.navigation.navigate('Home');

💡 Hint

In functional components, navigation is usually passed as a prop.

In React Navigation with functional components, you use the navigation prop directly: navigation.navigate('Home'). Option B is for class components. Options A and C are invalid functions.

🧠 Conceptual

expert

Why must you include 'Content-Type': 'application/json' header in a fetch POST request?

You send JSON data in a POST request but forget to set the 'Content-Type' header. What is the likely effect?

A The JSON data will be automatically converted to form data.

B The fetch request will fail with a syntax error.

C The server may not parse the JSON body correctly and reject the request.

D The server will accept the request but ignore the body.

💡 Hint

The Content-Type header tells the server how to read the request body.

Without the 'Content-Type': 'application/json' header, the server may treat the body as plain text or another format and fail to parse the JSON, causing errors or rejection.