Display user's GitHub repositories in React App

Question

I am still fairly new to React and I built a GitHub search app where you type in a user's name in a searchbox, it shows their avatar, bio, username etc, but no idea how to fetch their repositories of their GitHub and display them.

I do a fetch request in one of my stateless functional components where it gets the repo data, I can even do a console.log and that will display the data, but actually mapping it and rendering it does not seem to work.

Here is the code I have been trying in what I call my RepoList component that gets the data:

import React, { Component } from 'react';
import RepoListItem from './RepoListItem';


const RepoList = (props) => {
    const repoUserName = props.username;
    const repoURL = props.reposURL;





fetch(`https://api.github.com/users/${repoUserName}/repos`)
    .then(response => response.json())
    .then(data =>  {

        //const id = dateData.photos.map(roverdata => roverdata.id);

        console.log("getting mappedrepo array IDs", data.map((mappedData) => mappedData.id ));

        const mappedIDs = data.map((mappedData) => mappedData.id );
        const mappedRepoNames = data.map((mappedData) => mappedData.full_name );



        console.log("getting mappedrepo array names", mappedRepoNames);

        const arrayItems = data.map((arraySingleItem) => {
            return (
                <RepoListItem 
                    arrayID={arraySingleItem.id} 
                    key={arraySingleItem.id} 
                    fullName={arraySingleItem.full_name}
                 />
                );
        });


        console.log("repo data map function", repoData);

    });


return (
        <ul>
            <h4>Repos</h4>
            <a href={repoURL} className="embed-responsive-item">{repoURL}</a>
            <br />
            <br />
            <h3>List of repositories</h3>
            {arrayItems}

        </ul>
   );
};

export default RepoList;

I have a slightly different working version of the app deployed to Heroku at: https://githubsearchv1.herokuapp.com/ and the actual code is at https://github.com/aalfr494/githubsearchv1

Any idea what to try? Doing {arrayItems} in the return function seems to give an error saying it is not defined...is this because I did all this within the fetch block? Any ideas would help a ton.

Answer 1

you can use react-hooks

you can use useEffect() for api calling like this,

import React, { useState, useEffect } from 'react';
const RepoList = () => {
  const [arrayItems, setArrayItems] = useState([]);

  useEffect( async()=>{
    await fetch(`https://api.github.com/users/${repoUserName}/repos`)
    .then(response => response.json())
    .then(data => {
      const items= data.map((arraySingleItem) => {
        return (
            <RepoListItem 
                arrayID={arraySingleItem.id} 
                key={arraySingleItem.id} 
                fullName={arraySingleItem.full_name}
             />
            );
      });
      setArrayItems(items);
    })

  }
}

return (
        <ul>
            <h4>Repos</h4>
            <a href={repoURL} className="embed-responsive-item">{repoURL}</a>
            <br />
            <br />
            <h3>List of repositories</h3>
            {arrayItems}

        </ul>
   );
};