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!


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


closed #6

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