I receive an array like this from the backend :
['test.jpg', 'test2.jpg']
I put it into a React state named pictures.
What I need to do is to map on it, and for each picture name in the array, create an img with that name as variable in the path like this :
{pictures.map((picture) => (
<img
className="picture"
src={`http:localhost:8000/pictures/${ WHAT DO I NEED TO WRITE HERE ? }/>
)))}
The first argument from the map function refers to each item in your array, so name it whatever you want and you get the item from the array.
Since you have named it picture, the name of the each item is now picture
Briefly, you can put picture in the space as:
{pictures.map((picture) => (
<img
className="picture"
src={`http:localhost:8000/pictures/${picture}`}/>
))}
In this case you would just need to add http:localhost:8000/pictures/${picture}
Of course this will only work as long as there is an image with a matching name on port 8000