ReactJS: How to render columns horizontally

Question

I am facing an issue to order the columns of a fetched API data horizontally. I am trying to print the data fetched from an API into a table. Anyhow the rows are well printed horizontally, but the function that I used for rows this.state.data.map() doesn't function in the same way for the columns. I think it's ES6 standard, but I am not sure. Here is my printed issue.

Here is my code sample:

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: []
        }
    }

    componentDidMount()
    {

        fetch( "http://ickata.net/sag/api/staff/bonuses/" )
            .then( function ( response )
            {
                return response.json();
            } )
            .then( data =>
            {
             this.setState( { rows: data.rows, columns: data.columns } );
            } );

    }


    render()
    {

        return (
            <div id="container" className="container">
                <h1>Final Table with React JS</h1>
                   <table className="table">
                    <thead> {
                        this.state.columns.map(( column ) => (
                            <tr>

                                <th>{column[0]}</th>
                                <th>{column[1]}</th>
                                <th>{column[2]}</th>
                                <th>{column[3]}</th>
                            </tr>
                        ) )}
                            </thead>
                            <tbody> {
                                this.state.rows.map(( row ) => (
                                    <tr>
                                        <td>{row[0]}</td>
                                        <td>{row[1]}</td>
                                        <td>{row[2]}</td>
                                        <td>{row[3]}</td>
                                    </tr>
                                ) )
                            }
                            </tbody>
                        </table>
                    </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

I was able to print harcoded, if I give value to the 'th' elements, but I want to print it dynamically, in case the data within the API has been changed.

You are welcome to contribute directly to my Repo: Fetching API data into a table

Here is how looks like my example, when columns values has been hardcoded within 'th' elements.

Any suggestions will be appreciated!

Answer 1

var data = {
columns: [
"Full name",
"Job title",
"Age",
"Bonus",
],
rows: [
[
"John Smith",
"team lead front-end",
30,
444.08,
],
[
"Tom Jones",
"front-end developer",
25,
333.3,
],
[
"Deborah Barnes",
"front-end developer",
21,
233.66,
],
[
"Isaac Roberson",
"technical support",
44,
353,
],
[
"Josh Brown",
"team lead back-end",
35,
353,
],
[
"Chester Mckinney",
"back-end developer",
33,
223.27,
],
[
"Ora Burton",
"back-end developer",
32,
192.92,
],
[
"Jim Brown",
"technical support",
19,
98.99,
],
],
}

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: []
        }
    }

    componentDidMount()
    {

     
             this.setState( { rows: data.rows, columns: data.columns } );

    }


    render()
    {

        return (
            <div id="container" className="container">
                <h1>Final Table with React JS</h1>
                   <table className="table">
                    <thead>
                            <tr>
                             {this.state.columns.map(( column, index ) =>                                  {
       
                                 return (<th>{column}</th>)
                              }
                               )
                              }
                            </tr>
                            </thead>
                            <tbody> {
                                this.state.rows.map(( row ) => (
                                    <tr>
                                        <td>{row[0]}</td>
                                        <td>{row[1]}</td>
                                        <td>{row[2]}</td>
                                        <td>{row[3]}</td>
                                    </tr>
                                ) )
                            }
                            </tbody>
                        </table>
                    </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hope it may help

Answer 2

Not sure why you wanted to do columns[0], [1], [2] and [3]. Each column inside the map is a string. If you do columns[0] it will return you the first character from that which is what is happening in your case. Full Name, Job title, Age Bonus are rendered in your first image. First four characters in your columns.

The key attribute I added is just React's requirement to provide unique keys and has nothing to do with the problem.

this.state.columns.map((column, index) => (
    <tr>
        <th key={"columns-" + index.toString()}>
            {column}
        </th>
    </tr>
))