Double images
index.js
When the site loads I have to get 10 images instead getting 20 images
Another 10 images are same as the first 10 images
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
function Card({ wallpaper }) {
const { urls: { small }, slug, id, alt_description, user: { username, profile_image: { medium } }, description } = wallpaper;
return (
<div className="card" key={id}>
<div className='card-container'>
<img src={small} className='image-url' alt={alt_description} />
<span className='owner-profile'>
<img src={medium} className='owner-profile-image' alt={`${username}'s profile`} />
<span className='owner-name'>{username}</span>
</span>
<div className='wallpaper-details'>
<span className='card-title'>{slug.replace(/-/g," ")}</span>
<small className='card-description'>{description}</small>
</div>
</div>
</div>
);
}
function App() {
const [wallpapersList, setWallpapersList] = useState([]);
useEffect( () => {
async function load () {
let fetchData = await fetch('https://api.unsplash.com/photos/?client_id=ACCESS_TOKEN')
let fetchedJSON = await fetchData.json()
setWallpapersList(prev => [...prev , ...fetchedJSON])
}
load();
}, []);
return (
<>
<h1>Wallpapers</h1>
<main>
{wallpapersList.map((wallpaper) => (
<Card key={wallpaper.id} wallpaper={wallpaper} />
))}
</main>
</>
);
}
export default App;
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
function Card({ wallpaper }) {
const { urls: { small }, slug, id, alt_description, user: { username, profile_image: { medium } }, description } = wallpaper;
return (
<div className="card" key={id}>
<div className='card-container'>
<img src={small} className='image-url' alt={alt_description} />
<span className='owner-profile'>
<img src={medium} className='owner-profile-image' alt={`${username}'s profile`} />
<span className='owner-name'>{username}</span>
</span>
<div className='wallpaper-details'>
<span className='card-title'>{slug.replace(/-/g," ")}</span>
<small className='card-description'>{description}</small>
</div>
</div>
</div>
);
}
function App() {
const [wallpapersList, setWallpapersList] = useState([]);
useEffect( () => {
async function load () {
let fetchData = await fetch('https://api.unsplash.com/photos/?client_id=ACCESS_TOKEN')
let fetchedJSON = await fetchData.json()
setWallpapersList(prev => [...prev , ...fetchedJSON])
}
load();
}, []);
return (
<>
<h1>Wallpapers</h1>
<main>
{wallpapersList.map((wallpaper) => (
<Card key={wallpaper.id} wallpaper={wallpaper} />
))}
</main>
</>
);
}
export default App;
0 Replies