.App {
font-family: sans-serif;
text-align: center;
}
.image-container {
display: flex;
}
.image-box {
width: 30px;
height: 30px;
}
.image-container {
display: flex;
flex-wrap: wrap;
}
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
import React, { useState } from "react";
import { useEffect } from "react";
import "./styles.css";
const App = () => {
const URL = `https://jsonplaceholder.typicode.com/photos`;
const [imageList, setImageList] = useState([]);
useEffect(() => {
fetch(URL)
.then((res) => {
// console.log(res);
return res.json();
})
.then((data) => {
console.log(data);
setImageList(data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<div className="image-container">
{imageList.map((image) => {
return (
<div key={image.id}>
{/* <div>{image.title}</div> */}
<img className="image-box" src={image.url}></img>
</div>
);
})}
</div>
);
};
export default App;
Top comments (0)