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..!!
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;
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...