Mapping API info to React Component - reactjs

Question

I'm trying to create a Github search for user repos and display them in cards. My ListComponent looks good when displayed, but I'm having trouble mapping the repo info to each card. When I console.log the data it shows up as expected, but will not map to the cards. I'm using fetch for the api calls and lodash for mapping. Any help would be appreciated!
GithubSearch:
import React, { Component, Fragment } from 'react';
import ListComponent from './ListComponent';
import _ from 'lodash';
class GithubSearch extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
repos: [],
apiMsg:'',
userInfo: {}
}
};
handleChange = (e) => {
this.setState({ username: e.target.value });
setTimeout(this.handleSubmit, 1000)
}
handleSubmit = () => {
fetch(`https://api.github.com/users/${this.state.username}/repos`)
.then(res => res.json())
.then(data => {
console.log(data)
})
.catch(err => {
this.setState({
repos: [],
apiMsg: err.message
})
})
}
render() {
return (
<Fragment>
<div className='header'>Github Search</div>
<form className='search'>
<input
placeholder='Github user'
name='github user'
type='text'
onChange={this.handleChange}
value={this.state.username}
/>
<button type='submit' onSubmit={this.handleSubmit}>Search</button>
</form>
<p>{this.state.apiMsg}</p>
<div className='right-container'>
{_.map(this.state.repos, repo => <ListComponent key={repo.id} {...repo}/>)}
</div>
</Fragment>
)
}
}
export default GithubSearch;
ListComponent:
import React from 'react'
import '../App.css'
const ListComponent = ({ name, description, language, html_url }) => {
return (
<div className='card'>
<div className='card-body'>
<h2>{name}</h2>
</div>
<div className='card-body'>
<p>{description}</p>
</div>
<div className='card-body'>
<p>Languages: {language}</p>
</div>
</div>
);
}
export default ListComponent;

Answer 1

You have forgotten to set state for repo after API response , you try below code
handleSubmit = () => {
fetch(`https://api.github.com/users/${this.state.username}/repos`)
.then(res => res.json())
.then(data => {
console.log(data)
this.setState({repo:data})
})
.catch(err => {
this.setState({
repos: [],
apiMsg: err.message
})
})
}