ok.js

import React, {Component, Fragment} from 'react'
import styles from './styles.css'
import {HashRouter as Router, Link} from 'react-router-dom'
import api from '../../services/api'


export default class Dashboard extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    id: 21,
                    name: 'jp'
                }
            ]
        }
    }

    componentDidMount() {
        this.loadProducts()
    }

    loadProducts = async () => {
        const response = await api.get('/products')
        console.log(response)
    }
    /*
    ERROR:
    ERROR in ./app/src/components/Dashboard/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (28:17)

  26 |     }
  27 |
> 28 |     loadProducts = async () => {
     |                  ^
  29 |         const response = await api.get('/products')
  30 |         console.log(response)
  31 |     }
  */
    
    render() {
        let rows = this.state.data.map(person => {
            return <PersonRow key={person.id} data={person}/>
        })
        return (<Fragment>
            <div className={styles.dashboard}>
                <h1>DASHBOARD</h1>
                <table>
                    <tbody>
                        <tr>
                            <td>id</td>
                            <td>name</td>
                        </tr>
                        {rows}
                    </tbody>
                </table>
                <button onClick={this.update_test.bind(this)}>test</button>
            </div>
        </Fragment>)
    }
}

const PersonRow = (props) => {
    return (<tr>
        <td>
            {props.data.id}
        </td>
        <td>
            {props.data.name}
        </td>
    </tr>)
}