I cannot bring the data of the array that is showing on the console

Question

import React from "react";

function TrackingResult({ data }) {
  if (!data || !data.length) return null;

  return (
    <>
      <h1>Tracking Result</h1>
      <ul className="list-group">
        {data.map(item => {
          const { data, origem, destino, status } = item;
          console.log(item.evento)
          return (
            <li key="{index}" className="list-group-item">
              <span className="badge badge-primary">{origem}</span>
              <span>data: {data}</span>
              <span>destino: {destino}</span>
              <span>status: {status}</span>
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default TrackingResult;

Answer 1

Probably you are using the map in the wrong way or I do not know this way described there... I would use it this way

{data.map((item, index) => {
  return (
    <li key={index} className="list-group-item">
      <span className="badge badge-primary">{item.origem}</span>
      <span>data: {item.data}</span>
      <span>destino: {item.destino}</span>
      <span>status: {item.status}</span>
    </li>
  );
})}

As a precaution, I would add a useEffect to render your screen again if the date changes