React/Fetch - useState and useEffect to set product list on page load
Thu Oct 07 2021 04:58:01 GMT+0000 (Coordinated Universal Time)
Saved by
@rook12
#javascript
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;
content_copyCOPY
Comments