Массив из компонентов!

import React from 'react';
import Info from './components/info';
import Reposit from './components/reposit';
class App extends React.Component {
  state = {
    name: undefined
  }
  gettingRepos = async (event) => {
    event.preventDefault();
    const person = event.target.elements.person.value;
    const arr = await fetch(`https://api.github.com/users/${person}/repos`);
    var reposits = await arr.json();
    for(var i = 0; i< reposits.length; i++) {
      this.setState ({
        name: reposits[i].full_name
      })
    }
  }
  render() {
    return(
      <div>
        <Info reposMethod={this.gettingRepos}/>
        <Reposit name={this.state.name}/>
      </div>
    )
  }
};
export default App;

import React from 'react';
 
class Info extends React.Component{
render() {
  return (
    <div>
    <form onSubmit={this.props.reposMethod}>
      <input type="text" name="person"/>
      <button>Получить сведения</button>
    </form>
    </div>
  )
}
}
 
export default Info;

import React from 'react';
 
class Reposit extends React.Component {
  render() {
    return(
      <div>
        <p>
          Имя репозитория: {this.props.name}
        </p>
        <hr />
      </div>
    )
  }
}
 
export default Reposit;

class App extends React.Component {
  state = {
    repos: []
  }
  gettingRepos = async (event) => {
    event.preventDefault();
    const person = event.target.elements.person.value;
    const arr = await fetch(`https://api.github.com/users/${person}/repos`);
    var reposits = await arr.json();
    this.setState({ repos: reposits });
  }
  render() {
    return(
      <div>
        <Info reposMethod={this.gettingRepos}/>
        {this.state.repos.map(repo => {
          return (
            <Reposit name={repo.full_name} key={repo.full_name}/>  
          )
        })}
      </div>
    )
  }
};