Accessing state in another file?

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: [[0],[1],[2],[3],[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: [[0],[1],[2],[3],[4]]

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


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:
                            [,[i].player.summonerName] });
                    this.setState({ golds:
                            [...this.state.golds,[i].stats.goldEarned] });
                                getChampionById(this.state.champions,[i].championId) ] });
            .catch(error => {
                console.log("An error occured on apiGame D: ", error)


and my constructor in app.js :

    constructor(props) {
        this.state = {
            token: "the magic token",
            champions: [],
            name: [],
        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: