how to show API response in table format in react js?

Question

I'm trying to accessing API response and al the data of that API I want to show in a table format, I have written some code but the response is not shown in table format and also not shown any error. I have to use Axios for an API request, I think i have written some wrong code to API response handling

import React from "react";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  Table,
  Row,
  Col
} from "reactstrap";
import axios from 'axios';



class Tables extends React.Component {

  constructor() {
    super();
    this.state = {
      data: []
    }
  }

  componentDidMount() {
    const record = axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        //console.log(response.data);
        this.setState({
          data: [response.data]
        });
      });
  }




  render() {

    return (
      <>
        <div className="content">
          <Row>
            <Col>
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">Simple Table</CardTitle>
                </CardHeader>
                <CardBody>
                      <Table responsive>
                            <thead className="text-primary">
                              <tr>
                                <th>Name</th>
                                <th>User-Name</th>
                                <th>Email</th>
                              </tr>
                              {
                                this.state.data.map((item, index) => {
                                  return (
                                    <div key={index}>
                                      <tr>
                                        <td> {item.name} </td>
                                        <td> {item.username} </td>
                                        <td> {item.eamil} </td>
                                      </tr>
                                    </div>
                                  )
                                })
                              }

                            </thead>
                          </Table>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default Tables;

Answer 1

In your componentDidMount, remove the brackets in your setState, otherwise data will be an array of array, instead of just an array:

this.setState({
   data: response.data
});