import React, { useEffect, useState } from "react"; import "./App.css"; import Header from "./components/Header/Header"; const App = () => { const [properties, setProperties] = useState([]); const fetchData = async () => { const response = await fetch("http://localhost:5000/properties"); const data = await response.json(); setProperties(data); }; useEffect(() => { fetchData(); }, []); return ( <> <Header /> <div className="container"> <h1>Properties for sale</h1> {properties.map((property) => { return ( <li key={property.id}> <img src={property.img} alt={property.address} /> <div class="text"> <h2 class="title">{property.title}</h2> <p class="address">{property.address}</p> <p class="price">{property.askingPrice}</p> <p class="description">{property.description}</p> </div> </li> ); })} </div> </> ); }; export default App;