ReactJS - Showing Column Name

Nicholas :

EDIT

I am completely new to ReactJS, please bear with my stupidity.

Recently I have been playing around with ReactJS and PHP, and currently stuck on map.()

App.Js

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            uNames:[]
        };

        this.submitData = this.submitData.bind(this);
    }
    submitData=()=>{
        fetch('http://localhost/public/api/data.php')
        .then((response) => response.json())
        .then((result) => {
            this.setState({uNames: result});
            console.log(this.state.uNames);
       })
    }
    render(){
        return(
            <div>
                <Button onClick={this.submitData}>Test</Button>
                {this.state.uNames.map((uName, i) => 
                    <Table key={i}>
                        <thead>
                            <td key={uName[i]}>
                                {uName[i]}
                            </td>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                {uName.id}
                                </td>
                                <td>
                                {uName.firstname}
                                </td>
                                <td>
                                {uName.lastname}
                                </td>
                            </tr>
                        </tbody>
                    </Table>
                )}
            </div>
        );
    }
}

PHP

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header("Cache-Control: no-cache");
}

$serverName = "localhost";
$serverUserName = "root";
$serverPassword = "";
$dbName = "test";
$connection = new mysqli ($serverName, $serverUserName, $serverPassword, $dbName);

if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
} 

$sql = "SELECT id, firstname, lastname FROM mydata";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_array()) {
        $arr[] = $row;
        echo json_encode($arr);
    }
} else {
    echo "0 results";
}
$connection->close();
?>

MYSQL(table mydata)

id|firstname|lastname
1 |     John|     Doe

The row data(1,John,Doe) showing just fine, but for the column header(ID, FirstName, LastName), nothing's there.

Is it possible so the column header shows up(it reads dynamically from MySQL table) or it is only possible by setting every single column header as static content?

Mayank Pandeyz :

According to your code logic and question, uNames is an array of object and you are using map to iterate over array and get individual objects and from which you are showing name etc by this code:

uName.id
uName.firstname

etc and which is working fine. In that case you cant use:

uName[i]

as uName is an object under map and it is having keys like id, firstname etc and not having numeric keys that's why you are not getting anything. I hope this will help you in understanding the problem.