How to display information from API

Hello, I’m currently trying to display information from an API, but it doesn’t seem to be working. Right now I have it wait for the information to be fetched, and then I try to display it, but when I get to the displaying part, nothing happens.

May I have some help?

This is what my code look like as of now:

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

export default class App extends React.Component {

  constructor(props) {
    this.state = {
      isloading: true,
      dataSource: null,

  componentDidMount() {
    return fetch('')

      .then((response) => response.json())
      .then((responseJson) => {

          isloading: false,
          dataSource: responseJson.result,


      .catch((error) => {

  render() {

    if (this.state.isloading) {
          <View style={styles.container}>
    } else {

      let teams =, key) => {
        return <View key={key} style={styles.item}>

      return (
        <View style={styles.container}>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  item: {
    flex: 1,
    color: '#FF0000',

Thank you in-advance.

Hey @cameron-html,

Can you elaborate on what you mean by “nothing happens”? Can you add some console logging to see if your fetch payload contains anything to be displayed?



Hey @adamjnav,

I went ahead and checked if it contained anything through ‘console.log’, and I got this:

Array [
  Object {
    "city": "Courtenay",
    "country": "Canada",
    "grade": "High School",
    "is_registered": 0,
    "number": "7842F",
    "organisation": "NIDES/Navigate",
    "program": "VRC",
    "region": "British Columbia",
    "robot_name": "Guider 1",
    "team_name": "Navigators",

Is the way I’m trying to display the information wrong?

I was able to fix my issue, it seems I needed to place a limit on how many items I wanted, thank you for you help!

1 Like

Nice! Glad you figured it out and thanks for sharing the solution as well.


This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.