Double images

index.js
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;
When the site loads I have to get 10 images instead getting 20 images Another 10 images are same as the first 10 images
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server