Dispaly an array of objects from an API in React

Question

I'm trying to display an array of information on my page but I'm stuck on how I should do it.

I believe that the problem is in how I'm trying to render it but I have already done so many tries that I run out of ideas.

In the console, I´m having success on the request and I receive the array, but I can't figure out how to display it.

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import axios from "axios";

const MyLocations = () => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  console.log(endDate);
  console.log(startDate);
  const tokenAtual = sessionStorage.getItem("token");
  const [getLocations, setLocations] = useState([]);



  const handleList = () => {
    
    var axios = require("axios");
    var data = '{\r\n  "end": "2022-07-01",\r\n  "start": "2022-01-01"\r\n}';

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/position/history",
      headers: {
        Authorization:
          tokenAtual,
        "Content-Type": "text/plain",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
          console.log(response.data);
          setLocations(response.data);
          return
            <div>
              <h1>getLocations.map(response.data.location.latitide)</h1>
              <h1>getLocations.map(response.data.location.longitude)</h1>
            </div>
        
  })
      .catch(function (error) {
        console.log(error);
      });


  }

    return (
        <div>
          <title>My Locations</title>

          <input
          type="button"
          className="btn-pastLocals"
          onClick={handleList}
          value={"See Past Locations"}
        />
          <input
            type="date"
            className="start-date"
            placeholder="Start Date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}/>

          <input
            type="date"
            className="end-date"
            placeholder="End Date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}/>
          
        </div>
      );
}

export default MyLocations;

Can anyone please help me? Thank you..!!

What do you expect the return <div><h1> etc... in the axios(config).then function to do? Because whatever is returned is currently not being used at all. — Emil Karlsson
– Emil Karlsson, Commented May 24, 2022 at 11:09
You can't render anything inside the axios(config).then function. What you need to do is to conditionally add the html elements to the existing return (<div><title> etc... via the getLocations state. — Emil Karlsson
– Emil Karlsson, Commented May 24, 2022 at 11:14
So I need to create a function that will call getLocation, return it to html code and the call it inside the axios? — Dario Santos
– Dario Santos, Commented May 24, 2022 at 11:18
@DarioSantos You should probably change the name from getLocation to location, since you are supposed to treat it sort of like it's a variable (that can only be indirectly changed through the setLocations function) rather than like it's a function. You don't "call" a variable. — Emil Karlsson
– Emil Karlsson, Commented May 24, 2022 at 11:29

HogasAndreiMarius · Accepted Answer · 2022-05-24 11:26:37Z

This might work if the the locations array has this structure

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import axios from "axios";

const MyLocations = () => {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  console.log(endDate);
  console.log(startDate);
  const tokenAtual = sessionStorage.getItem("token");
  const [getLocations, setLocations] = useState([]);



  const handleList = () => {
    
    var axios = require("axios");
    var data = '{\r\n  "end": "2022-07-01",\r\n  "start": "2022-01-01"\r\n}';

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/position/history",
      headers: {
        Authorization:
          tokenAtual,
        "Content-Type": "text/plain",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
          console.log(response.data);
          setLocations(response.data);
  })
      .catch(function (error) {
        console.log(error);
      });


  }

    return (
        <div>
          <title>My Locations</title>
          {locations.map((location) => {
             return (
             <>
              <h1>
                {location.data.location.latitude}
              </h1>
              <h1>
                {location.data.location.latitude}
              </h1>
             </>
             )
          })}
          <input
          type="button"
          className="btn-pastLocals"
          onClick={handleList}
          value={"See Past Locations"}
        />
          <input
            type="date"
            className="start-date"
            placeholder="Start Date"
            value={startDate}
            onChange={(e) => setStartDate(e.target.value)}/>

          <input
            type="date"
            className="end-date"
            placeholder="End Date"
            value={endDate}
            onChange={(e) => setEndDate(e.target.value)}/>
          
        </div>
      );
}

export default MyLocations;

Emil Karlsson · Accepted Answer · 2022-05-24 11:21:57Z

2

First of all, you need to study the react documentation and learn how it works.

Secondly, here is a possible solution to your problem:

return (
  <div>
    <title>My Locations</title>

    {
      getLocations.map(
        location => (
          <div>
            <h1>
              {location.data.location.latitude}
            </h1>
            <h1>
              {location.data.location.latitude}
            </h1>
          </div>
        )
      )
    }

etc...

answered May 24, 2022 at 11:21

Emil Karlsson

1,0881 gold badge10 silver badges17 bronze badges

3 Comments

Tomasz Kasperczyk Over a year ago

It's a good answer, but it's worth adding that returning anything from a functional component in an async callback is a terrible practice.

Emil Karlsson Over a year ago

I did write that you can't render anything inside an axios call, in the comments to the question. But yeah, returning anything from an axios call is of course a bad idea.

Dario Santos Over a year ago

Thank you all for the help, the point is that I'm learning react and this is also a project to my classes. With no experience this can become a "little" overwhelming.

Collectives™ on Stack Overflow

Dispaly an array of objects from an API in React

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related