Answer the question
In order to leave comments, you need to log in
How to display a picture of a GitHub user?
An error in the code. It is necessary to display the picture (and under it - the name) of the GitHub user. User search - through the form field. Repositories with pagination are already displayed depending on whose nickname is entered in the form field. Missing name and picture.
app.js:
import React, { useState, useEffect } from 'react';
import Posts from './components/Posts';
import Pagination from './components/Pagination';
import Info from './components/Info'
import axios from 'axios';
import './App.css';
const App = () => {
const [repos, setRepos] = useState([]);
const [imageSource, setImageSource] = useState('');
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(10);
async function fetchRepos(username) {
setLoading(true);
let result = [];
let result2 = '';
try {
result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
result2 = (await axios.get(`https://api.github.com/users/${username}`)).data.avatar_url;
} catch(e) {
console.error(e);
}
setRepos(result);
setImageSource(result2);
setLoading(false);
}
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = repos.slice(indexOfFirstPost, indexOfLastPost);
const paginate = pageNumber => setCurrentPage(pageNumber);
return (
<div className='container mt-5'>
<h1 className='text-primary mb-3'>My Blog</h1>
<Info onSearch={fetchRepos} source={imageSource} />
<Posts posts={currentPosts} loading={loading} />
<Pagination
postsPerPage={postsPerPage}
totalPosts={repos.length}
paginate={paginate}
/>
</div>
);
};
export default App;
import React from 'react';
function Info({onSearch}, props) {
const [ searchValue, setSearchValue ] = React.useState('');
function onSubmit(e) {
e.preventDefault();
onSearch(searchValue);
}
return (
<form onSubmit={onSubmit}>
<input
type="text"
value={searchValue}
onChange={e => setSearchValue(e.target.value)}
/>
<button>Найти</button>
<img src={props.source} alt="user" />
</form>
)
}
export default Info;
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question