Как вывести картинку пользователя GitHub?

Question

[AntonHPL]

Ошибка в коде. Надо вывести картинку (а под ней - имя) пользователя GitHub. Поиск пользователя - через поле формы. Репозитории с пагинацией уже выводятся в зависимости от того, чей ник введен в поле формы. Не хватает имени и картинки.

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;

Info.js:

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;

Comments

[Mikhail Osher]

Демку на codesandbox покажите

[AntonHPL]

https://codesandbox.io/s/eager-sea-yu2u1?file=/src...
Работает ссылка? Я первый раз.
Я переместил тег img в компонент app.js. Но хотелось бы его видеть в Info.js вместе с именем пользователя под ним.

[0xD34F]

function Info({onSearch}, props) {

function Info({ onSearch, ...props }) {