I am trying to display the last 5 repos of a GitHub user. However i am only able to either display all repos of user or none at all. I am not sure where I am doing wrong. Edited to use array slice instead of for loop

import React,{Component} from "react";
import withRouter from "../withRouter";
class Repose extends Component{
    constructor(props){
        super(props);
        this.state={ repos: []};
        
    }
    async componentDidMount(){
        const FetchRepose = async(user)=>{
            const API_Call=await fetch(`https://api.github.com/users/${this.props.user}/repos`)
            const data= await API_Call.json();
            return {data}
        }
        FetchRepose(this.props.user).then((res)=>{
            if(res.data.length>0&!res.data.message){
                let items =res.data;// Displays all repos. If items=[] will display empty field
                this.setState({repos:items[items.length-5][items.length]});
            }
        })

    }
Data(){
        return(
        <div>
        <div>
          <h3>here Last 5 repo</h3>
            <div className="lastfiveRepo">{this.props.user}
              {this.state.repos.map(res=>(
                  <div key={res.id}>
                      <a key={res.id} href={res.html_url}>
                          {res.name}
                          
                      </a>
                  </div>
              ))}
           
            </div>
          </div>

      </div>
        )
    }

CodePudding user response：

Instead of using for loop, better use