Как сделать запрос API с помощью axios?

Я новичок в реагировании, и у меня есть следующие проблемы:

Я использую API с более чем 60 символами, моя проблема в том, что я хочу убедиться, что все символы моего API отображаются без необходимости вручную добавлять каждый номер. ({this.state.people[0].name} , ..., {this.state.people[n].name}).

Эта проблема также заставила меня выполнить вызов API два раза, потому что API дает только 10 результатов за вызов. они следующие на странице 2.

Я создал новый вызов с ?=page2, но это очень утомительный способ сделать это, потому что мне пришлось бы добавить 10 разных вызовов API, чтобы добавить все символы. Я думал о цикле for, но я действительно не знаю, как к этому подойти.

class Api extends Component {

state  = {
    people:[
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    ],

    people2:[
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    {name:'Title'},
    ]
}

componentDidMount() {
  axios.get('https://swapi.co/api/people/')

  .then(starwars => {
    this.setState({
        people: starwars.data.results
    })
    console.info(starwars.data.results)

  })
axios.get('https://swapi.co/api/people/?page=2')
  .then(starwars2 => {
    this.setState({
        people2: starwars2.data.results
    })
    console.info(starwars2.data.results)

  })
  .catch(error => {
    console.info(error);
  });
}

  render(){
    return ( 

        <div>
        <Cards title = {this.state.people[0].name} />
        <Cards title = {this.state.people[1].name} />
        <Cards title = {this.state.people[2].name} />
        <Cards title = {this.state.people[3].name} />
        <Cards title = {this.state.people[4].name} />
        <Cards title = {this.state.people[5].name} />
        <Cards title = {this.state.people[6].name} />
        <Cards title = {this.state.people[7].name} />
        <Cards title = {this.state.people[8].name} />
        <Cards title = {this.state.people[9].name}  />
        <Cards title = {this.state.people2[0].name}  />
        <Cards title = {this.state.people2[1].name}  />
        <Cards title = {this.state.people2[2].name}  />
        <Cards title = {this.state.people2[3].name}  />
        <Cards title = {this.state.people2[4].name}  />
        <Cards title = {this.state.people2[5].name}  />
        <Cards title = {this.state.people2[6].name}  />
        <Cards title = {this.state.people2[7].name}  />
        <Cards title = {this.state.people2[8].name}  />
        <Cards title = {this.state.people2[9].name}  />

</div>)
  }
}
export default Api;

Сделайте вызов API для 60 символов за один вызов.