Skip to content
This repository has been archived by the owner on Jan 23, 2021. It is now read-only.

This is my code and I its not working #362

Open
doctorstr opened this issue Jul 9, 2018 · 0 comments
Open

This is my code and I its not working #362

doctorstr opened this issue Jul 9, 2018 · 0 comments

Comments

@doctorstr
Copy link

doctorstr commented Jul 9, 2018

i am new to react and working on a dummy project. I am trying to display a table which fetches data from a server and displays all the information in it. the code is printing my table header but it is not printing any thing that is fetched. also i dont know whether it is fetching any information from the Api or not. what are my mistakes? all the help is appreciated.

 import React from 'react'

 export default class Users extends React.Component {
    constructor(props) {
         super(props);

    this.columns = [
        {
            name: "Name",
            key: "name"
        }, {
            name: "Id",
            key: "id"
        }, {
            name: "Username",
            key: "username"
        }, {
            name: "Email",
            key: "email"
        }, {
            name: "Website",
            key: "website"
        }
    ];
    this.maxItems = this.columns.length;

};
state = {
    pgNo: 0,
    users: [],
    isFetching: true
};

componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
        .then(response => response.json())
        .then(res => {
            this.setState({users: res, isFetching: false});
        });

}

createTable = () => {
    let table = [];

    let tableHeader = <thead>
        <tr>
            {this.columns.map(column => {
                    return <th key={this.columns.key}>
                        {column.name}
                    </th>
                })}
        </tr>
    </thead>;

    let tableRows = [];
    for (let i = this.props.pgNo; i < i + this.props.maxItems; i++) {
        let row = <tr>
            {this.columns.map(column => {
                    return <td key={this.column.key}>
                        {this.props.users[i][column.key]}
                    </td>
                })}
        </tr>

        tableRows.push(row)
    }
    let tableBody = <tbody>{tableRows}</tbody>;
    return <table>{table}{tableHeader}{tableBody}</table>;
}

render() {
    return this.state.isFetching
        ? (
            <div
                className="loader"
                style={{
                marginLeft: "50%"
            }}>
                <img src="/assets/index.svg"/>
            </div>
        )
        : (
            <div className="col-sm-10">
                {this.createTable()}
            </div>
        )
}

})

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant