Star Wars - Api

Char.js

import React, {Component} from "react"
import user from "../images/user-icon.png"
import "../styles/char.css"
import axios from "axios";

class Char extends Component {

    constructor(props) {
        super(props);
        this.state = {
            starshipsActive: [],
            onClick: false
        }
    }

    seeMore = (starships) => {
        return () => {
            this.setState({starshipsActive: [], onClick: true});
            debugger;
            const accumulator = [];
            console.log('starships:::', starships);
            if (Array.isArray(starships) && starships.length) {
                starships.map(async (item) => {
                    await axios.get(item)
                        .then(data => {
                            accumulator.push(data.data);
                            this.setState({starshipsActive: accumulator});
                        })
                        .catch(error => {
                            console.log(error);
                        });
                });
            }
        }
    };

    render() {
        return (
            <div className="char">
                <img src={user}/>
                <div>
                    {
                        <ul>
                            {
                                this.state.starshipsActive.map((i,index) => {
                                    return <li key={index}>{i.name}</li>
                                })
                            }
                        </ul>
                    }
                    {console.log('starshipsActive', this.state.starshipsActive)}
                    <h2 className="char-name">{this.props.info.name}</h2>
                    <span className="char-birth">{this.props.info.birth_year}</span>
                    <span className="char-gender">{this.props.info.birth_year}</span>
                    <span className="char-birth">{this.props.info.gender}</span>
                    <span className="char-species"></span>
                    <div className="char-starships">
                        <h2>Starships </h2>
                        <button onClick={this.seeMore(this.props.info.starships)}>Veja Mais</button>
                    </div>
                </div>
            </div>
        )
    }

}

export default Char;

Index.js

//Libs
import React, {Component} from "react"
import axios from "axios"
import Pagination from "../components/Pagination"
import Char from "../components/Char"
import Loader from "../components/Loader"
//Images
import logo from "../images/Starwars.png"

class IndexPage extends Component {

    setLoader = (action) => this.setState({isFetching: action});

    constructor(props) {
        super(props);
        this.state = {
            info: [],
            nextPage: null,
            prevPage: null,
            isFetching: false
        }
    }

    componentDidMount() {
        this.setLoader(true);
        axios.get("https://swapi.co/api/people/")
            .then(data => {
                let _data = data.data.results;
                this.setState({
                    info: _data,
                    nextPage: data.data.next,
                    prevPage: data.data.previous
                });
                this.setLoader(false);
            })
            .catch(error => {
                console.log(error);
            });
    }

    handlePagination = (url) => {
        //Colocando return, evita da função ser invocada na view sem o evento de click
        return (e) => {
            this.setLoader(true);
            console.log("handlePagination");
            axios.get(url)
                .then(data => {

                    let _data = data.data.results;
                    let _next = data.data.next;
                    let _prev = data.data.previous;

                    console.log("DATA >>>", data.data);
                    console.log("NEXT >>>", _next);
                    console.log("PREV >>>", _prev);

                    this.setState({
                        info: _data,
                        nextPage: _next,
                        prevPage: _prev,
                    })

                })
                .catch(error => {
                    console.error(error);
                })
                .finally(() => {
                    this.setLoader(false);
                })
        }
    };

    render() {

        const nextPage = this.state.nextPage;
        const prevPage = this.state.prevPage;
        const isFetching = this.state.isFetching;

        return (
            <>
                <div className="container">
                    <img className="logo" src={logo}/>
                    <h2 className="subtitle">Characters</h2>
                    {isFetching && <Loader/>}
                    {!isFetching &&
                    <ul>
                        {
                            this.state.info.map(i => (
                                <li key={i.name}>
                                    <Char info={i}/>
                                </li>
                            ))
                        }
                    </ul>
                    }
                    <Pagination
                        handleNextPage={this.handlePagination(nextPage)}
                        handlePrevPage={this.handlePagination(prevPage)}
                        btnPrevState={prevPage}
                        btnNextState={nextPage}
                        currentPage={this.state.currentPage}
                    />
                    <footer>
                        Developed by <a href="http://rqueiroz.netlify.com/" target="_blank"> me </a> :)
                    </footer>
                </div>
            </>
        )
    }
}

export default IndexPage