javascript - How do i render array with objects in JSX?

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65947092/how-do-i-render-array-with-objects-in-jsx

Answer 1

Maybe just add your fetched data to the state, then map through it as a ul?

import React from "react";

const App = () => {
  useEffect(() => {
    fetchVehicles();
  }, []);

  const fetchVehicles = () => {
    axios.get("/api/vehicles").then((res) => {
      const vehicles = res.data;
      vehicles &&
        vehicles.map((v) => {
          setVehicles([...vehicles, { name: v.name, model: v.model }]);
        });
    });
  };

  return (
    <div>
      {vehicles ? (
        <ul>
          {vehicles.map((v) => {
            return (
              <li>
                <p>{v.name}</p>
                <p>{v.model}</p>
              </li>
            );
          })}
        </ul>
      ) : (
        <p>no vehicles</p>
      )}
    </div>
  );
};

export default App;