Accessing state in another file?

Hello!
I’m using charjs and reactjs to create a graph which will render the total gold of a player With Bar (Riot game api).

So I have created a new file under a folder " component "
Here is the code

import { Line, Bar } from 'react-chartjs-2';

const data = {
    labels: [this.state.name[0], this.state.name[1], this.state.name[2], this.state.name[3], this.state.name[4]],
    datasets: [
        {
            label: 'Gold',
            fill: false,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [this.state.gold[0], this.state.gold[1], this.state.gold[2], this.state.gold[3], this.state.gold[4]]
        }
    ]
};

export default class BarDemo extends Component {
    render() {
        return (
            <div>
                <h2>Game Gold</h2>
                <Bar ref="chart" data={data} />
            </div>
        );
    }


}

And there is here is how in my app.js I get the gold and name of the players:

async apiGame() {
        let matchID = this.state.matchId;
        const gameurl = `/match/v4/matches/${matchID}`;
        await axios.get(gameurl, {
            params: {},
            headers: {'X-Riot-Token': this.state.token}
        })
            .then(res => {
                for (let i = 0; i < 10; i++) {
                    this.setState({ name:
                            [...this.state.name, res.data.participantIdentities[i].player.summonerName] });
                    this.setState({ golds:
                            [...this.state.golds, res.data.participants[i].stats.goldEarned] });
                    this.setState({champion:
                            [...this.state.champion,
                                getChampionById(this.state.champions,res.data.participants[i].championId) ] });
                }
                console.log(this.state.golds[1]);
                    this.setState({bluetowerdestroy: res.data.teams[0].towerKills});
                    this.setState({redtowerdestroy: res.data.teams[1].towerKills});
                    this.setState({bluedragonkilled: res.data.teams[0].dragonKills});
                    this.setState({reddragonkilled: res.data.teams[1].dragonKills});
            })
            .catch(error => {
                console.log("An error occured on apiGame D: ", error)
            })

    }

and my constructor in app.js :


    constructor(props) {
        super(props);
        this.state = {
            token: "the magic token",
            champions: [],
            champion:[],
            name: [],
            golds:[],
        };
        this.apiGame = this.apiGame.bind(this);
    }

So I got this Error: TypeError: Cannot read property 'state' of undefined which I understand because first my file chart.js is loading before app.js and, even if he know what mean, the data are not really passed in the file.

So I searched a lot in google things like " how to pass data from a file to another" or " How to use state from a file to another " but nothing really helped me here and also with the documentation, but yeah, I’m a newbie with react and progamming in general so I’m totally lost in this (If you have some advices to help me with that too or in general, I take those ! )

If you guys can give me an advice, it will be really appreciated.

Thanks !

Some reading for you:

Generally, if the above method becomes too unwieldy, then people turn to state management libraries, the most popular in React-land being Redux: