Axios method Get: I can't show data in my table

Question

I want to show a JSON in my web. Im consuming an API with a security token, all is good until i want to show the data of the json in my page, and its only there because in my console i can see the data. I hope you can helpme.

import React from 'react';
import axios from 'axios';

const Table = () => {

const url = 'someApi';
const token = 'someToken'   
axios(url, {
    method: 'get',
    headers: {
        'Authorization': `Bearer ${token}`
    },
    'body': JSON.stringify({
         name: this.state.name,
         quantity: this.state.quantity,
         price: this.state.price,
     })
})
// .then(response => response.json())
.then(response => {
    console.log(response);
})
.catch(error => console.error(error));

    return(
       <>
        <table>
            <thead>
                <tr>
                    <th>sku</th>
                    <th>name</th>
                    <th>quantity</th>
                    <th>price</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
       </>
    )
}

export default Table;

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Dec 04 '20 at 16:27
Perhaps a better duplicate: https://stackoverflow.com/questions/27192621/reactjs-async-rendering-of-components — Jared Smith, Dec 04 '20 at 16:28
wrapp it into useEffect hooka and when the response arrives use setState to store the response hence build the table with it. — EugenSunic, Dec 04 '20 at 16:40

b3hr4d · Answer 1 · 2020-12-05T05:22:58.590

i think u should learn more about react and how to use map function, i prefer watching some tuts on youtube about it.

ill share some simple usage of axios and maping data hope helps u a bit .

const Table = () => {

  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    if (!data) {
      axios("https://jsonplaceholder.typicode.com/users", {
        method: "GET",
      })
        .then((res) => setData(res.data))
        .catch((error) => console.error(error));
    }
  },[data]);

  return (
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>email</th>
          <th>phone</th>
        </tr>
      </thead>
      <tbody>
        {data
          ? data.map((d) => (
              <tr key={d.id}>
                <td>{d.id}</td>
                <td>{d.name}</td>
                <td>{d.email}</td>
                <td>{d.phone}</td>
              </tr>
            ))
          : null}
      </tbody>
    </table>
  );
}

ReactDOM.render(
  <Table />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="react"></div>

You should limit when `useEffect` is run. Right now it is run every time the component renders. This means at least twice, once as the initial render and then again when you get the data for the first time back. So you are overusing your API. For Example `useEffect(() => {...}, [])` will only fetch the data once. — ian, Dec 04 '20 at 20:25
Its run when the data is empty , did u check my if statement inside useEffect , btw the question is about the showing data on the table ! — b3hr4d, Dec 04 '20 at 22:21
I'll add "data" on useEffect, so just render once and fetching data when its null. — b3hr4d, Dec 05 '20 at 05:28

Axios method Get: I can't show data in my table

1 Answers1