Loading and error states in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a loading spinner while data is loading.

React Native

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

export default function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 2000);
  }, []);

  if ([1]) {
    return <ActivityIndicator size="large" />;
  }

  return <Text>Data loaded!</Text>;
}

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

Aloading

Bloading === false

C!loading

DsetLoading

Attempts:

3 left

💡 Hint

Common Mistakes

Checking if loading is false instead of true.

Using the setter function instead of the state variable.

The loading state is true while data is loading, so we check if (loading) to show the spinner.

2fill in blank

medium

Complete the code to display an error message when there is an error.

React Native

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

export default function App() {
  const [error, setError] = useState(null);

  return (
    <View>
      {error && <Text style={{ color: 'red' }}>{ [1] }</Text>}
      <Text>Content goes here</Text>
    </View>
  );
}

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

Aerror.message

Berror

CsetError

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access error.message when error is a string.

Using the setter function setError instead of the error value.

The error state holds the error message string, so we display it directly.

3fill in blank

hard

Fix the error in the code to correctly show loading, error, or data states.

React Native

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

export default function App() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if ([1]) {
    return <ActivityIndicator size="large" />;
  }

  if (error) {
    return <Text>Error: {error}</Text>;
  }

  return <Text>Data: {JSON.stringify(data)}</Text>;
}

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

Aloading

Bloading === false

C!loading

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Checking if loading is false instead of true.

Checking error instead of loading for spinner.

The loading spinner should show while loading is true, so the condition is if (loading).

4fill in blank

hard

Fill both blanks to create a conditional rendering that shows loading or error messages.

React Native

function StatusMessage({ loading, error }) {
  return (
    <View>
      {loading ? <Text>[1]</Text> : error && <Text style={{ color: 'red' }}>[2]</Text>}
    </View>
  );
}

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

A"Loading..."

B"Error occurred"

C"Success!"

D"Please wait"

Attempts:

3 left

💡 Hint

Common Mistakes

Using success message instead of loading or error.

Mixing up loading and error messages.

When loading is true, show "Loading...". If not loading but error exists, show "Error occurred".

5fill in blank

hard

Fill all three blanks to create a component that shows loading, error, or data text.

React Native

function DataDisplay({ loading, error, data }) {
  if ([1]) return <Text>Loading...</Text>;
  if ([2]) return <Text style={{ color: 'red' }}>Error: {error}</Text>;
  return <Text>Data: { [3] }</Text>;
}

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

Aloading

Berror

Cdata

D!loading

Attempts:

3 left

💡 Hint

Common Mistakes

Checking error before loading.

Displaying wrong variable in data text.

Check loading first to show loading text, then error to show error, else show data.