I'm trying to extract Data from Object (API) in React

Im trying to display the the API data on the page from an Object.

I attempted to display the data from the CamperList variable inside the camperlist.js file, but I'm having trouble.

I am going to paste in the code from each file that I have used to retrieve the API.

Here is the code from the camperlist.js file:

import React from 'react';

import CamperListItem from './camper_list_item.js'

//This is where the data is being pulled from VVVV
const CamperList = (props) => {

console.log('these are the datas', props.campers);

return (
  
<div> hello world </div>

  );
}

export default CamperList


In this next file is where you will find the "CamperList" component being rendered.

This is the App.js file:

import React, { Component } from 'react';
import logo from './logo.svg';
//import './App.css';
import axios from 'axios';

import CamperList from './camperlist'



export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recentCampers: [],
      allTimeCampers: [],
      currentView: 'recentCampers'
    }


   }

  componentWillMount() {
     let current = this;
  axios.all([this.fetchRecent(), this.fetchAllTime()]).then(axios.spread(function(recentCampers, allTimeCampers){
    current.setState({ recentCampers, allTimeCampers});
  }));
}


   fetchRecent(){
     return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
   }

   fetchAllTime(){
     return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
   }

   changeView(currentView){
     this.setState({currentView})
   }

   render() {
     return (
<div>
<h2> viewing top {this.state.currentView} </h2>
 <button onClick={()=> this.changeView('recentCampers')} className="btn btn-primary"> Recent </button>
 <button onClick={() => this.changeView('allTimeCampers')} className="btn btn-primary"> All Time </button>
<CamperList campers={this.state[this.state.currentView]}/>

 </div>
     );
   }
 }


And this is the camper_list_item.js file:

import React from 'react';

const CamperListItem = (props) => {
  return(
  <div> camper item </div>
  );
}

export default CamperListItem

2 answers

  • answered 2018-01-17 02:54 wakaka

    Were you able to receive your request succesfully?

    Because by looking at your code. It will only display hello world.

    You should change you CamperList component something like this to display your request.

    import React from 'react';
    
    import CamperListItem from './camper_list_item.js'
    
    //This is where the data is being pulled from VVVV
    const CamperList = (props) => {
    
      return (
        <div>
          {props.campers.map(c => {
            return <div key={c.username}>{c.username}</div>
          }}
        </div>
      );
    }
    
    export default CamperList
    

  • answered 2018-01-17 02:54 jamcreencia

    You may return the CamperListItem component after looping through the campers prop in CamperList.

    import React from 'react';
    
    import CamperListItem from './camper_list_item.js'
    
    const CamperList = (props) => {
      return (
        <div>
          {
            props.campers.map((camper, i) => {
              return <CamperListItem camper={camper} key={i} />
            }
          }
        </div>
      );
    }
    
    export default CamperList;
    

    Here I have illustrated an example of using the props given to CamperListItem:

    import React from 'react';
    
    const CamperListItem = (props) => {
      return(
      <div>{props.camper.name}</div>
      );
    }
    
    export default CamperListItem