ok.jsx

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

export default class Dashboard extends Component {

    constructor() {
        super();
        this.state = {
            data: [
                {
                    id: 1,
                    name: 'jp'
                }
            ]
        }
    }
    update_test() {
        this.setState({data: {id: 2, name:'ok'}})
        //this.setState({ data: [...this.state.data, { id: 1, name: 'foo' }] })
        console.log(this.state.data);
    }

    update_test() {
        this.setState({id: 1, name:'ok'})
        console.log(this.state.data);
    }

    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>)
}