PlantsOverview.tsx

import {useEffect, useState} from "react";
import PlantCard from "./PlantCard";

export default function PlantsOverview() {
    const [plants, setPlants] = useState<any[]>([]);
    const [error, setError] = useState();

    useEffect(() => {
        fetch("http://localhost:8080/api/v1/plants")
            .then((res) => res.json())
            .then((plants) => setPlants(plants))
            .catch((err) => setError(err));
    }, []);

    return (
        <>
            {error ? (
                <p>Error fetching data</p>
            ) : (
                <ul style={{display: "flex", gap: "1rem", width: "100%"}}>
                    {plants?.map((plant) => (
                        <PlantCard plant={plant} key={plant.id}/>
                    ))}
                </ul>
            )}
        </>
    );
}