ok.jsx

import React, {Component, Fragment} from 'react'
import styles from './styles.css'
import {HashRouter as Router, Link} from 'react-router-dom'
const sqlite = require('sqlite3').verbose();
const db = new sqlite.Database('/Users/converge/Documents/workspace/duffgram-engine/db/duffgram.db')


export default class Dashboard extends Component {

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

    update_test() {

        // let x = { id: 3, name: 'ook'}
        let db_ret = {}
        db.all("SELECT id, username FROM ig_account", function(err, rows) {
            rows.forEach(function (row) {
                //db_ret.concat({id: row.id, name: row.username})
                db_ret.concat({id: row.id, name: row.username})
                console.log(db_ret)
            })
        })
        db.close()
        console.log(db_ret)

        let x = {id: 3, name: 'ooooook'}
        this.setState({
            data: this.state.data.concat(x)
        })
        let www = ''
        www = www.concat({ id: 90, name: 'ow'})
        console.log(www)
    }

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