How to make image element block element in ReactJS

JavaScript
1

am building react image gallery, where I’ve display all the images on the browser. I have previous and next buttons display the previous and next images if a user clicks on any of them, which is working very well.
My problem is that I want this previous or next image to be displayed below the already displayed images, not next to them.
I’ve set the CSS display property of the image element to block but it is still displayed next to the other images
below is the code
import ReactImageMagnify from ‘@blacklab/react-image-magnify’;
import galleryData from ‘…/GalleryData’;
import ‘…/App.css’;
import { useState } from ‘react’;

function Image(){
const [images, setImages] = useState(galleryData);
const [currentIndex, setCurrentIndex] = useState(0);

const goToPreviousImage = ()=>{
if (currentIndex > 0){
setCurrentIndex(currentIndex - 1)

}

};

const goToNextImage = () =>{
if(currentIndex < images.length - 1){
setCurrentIndex(currentIndex + 1)

}

}

const currentImage = images[currentIndex];

return(
  
    <div className="App flex-container" >
      <button onClick={goToPreviousImage}>Previous</button>
    {
      images.map((image, index) => (
      <div key={image.id} className={`image-gallery-item ${index === currentIndex ? 'active' : '' }`}>
          <ReactImageMagnify 
          activationInteractionHint='hover'
          imageProps={{
            src:image.url,
            width: 200,
            height: 200
          }}
          magnifiedImageProps={{
            src: image.url,
            width: 800,
            height: 800
          }}
          portalProps={{
            id: 'portal-test-id',
            horizontalOffset: 20
          }}
          />
      </div>
  ))}
  <button onClick={goToNextImage}>Next</button>
  <img src={currentImage.url} className='next-img'/>
  
  
  </div>
  

);

};
export default Image;

CSS Code

.next-img{
display: block;
width: 300px;
height: 300px;
}

2

have you tried making use of “absolute” and “z-index”? if not perhaps you might want to look into that, happy coding :slight_smile: