Build an Image slider in react - reactjs

Question

I can't figure out something very simple :-(
I'm building an image slider in react, with this idea:
Import a data.js file, containing the image filepaths.
the user clicks on a button and moves through the array.
Of course, I cant import images one by one...
import React from 'react';
import pics from './data'; //-->array with paths to images.
function App() {
let path =`./wallpapers/${pics[0]}`
console.log(path)
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button>Left</button>
<button>Right</button>
</div>
</div>
);
}
export default App;
Now I'm confused since as this is javascript images won't be loaded like that. Is there any way to achieve this, or any technology I should take a look at?

Answer 1

You would need some sort of "current" image setting. Clicking the buttons would trigger the value to up or down. Default it to 0. This code isn't going to work as is, but the concept is like this:
import React, { useState } from 'react'
import wallpapers from './wallpapers'
function App() {
[ currentImage, setCurrentImage ] = useState(0)
const path =`./wallpapers/${wallpapers[currentImage]}`
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button onClick={() => setCurrentImage(currentImage - 1)}>Left</button>
<button onClick={() => setCurrentImage(currentImage + 1)}>Right</button>
</div>
</div>
);
}
In a separate file, you can import all the images
// wallpapers/index.js
import Wall1 from './wallpapers/1.png';
import Wall2 from './wallpapers/2.png';
import Wall3 from './wallpapers/3.png';
import Wall4 from './wallpapers/4.png';
import Wall5 from './wallpapers/5.png';
import Wall6 from './wallpapers/6.png';
export default [
Wall1,
Wall2,
Wall3,
Wall4,
Wall5,
Wall6
]