Next and Previous button does not function

JavaScript
1

am building a React image gallery with next and previous buttons so users can click to go to the next image and the previous image. but it does not work.

import ReactImageMagnify from '@blacklab/react-image-magnify';
import galleryData from '../GalleryData';
import  '../App.css';
import { useState } from 'react';
 function Image(){
  const [images, setImages] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

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

  const goToNextImage = () =>{
    if(currentIndex < images.length - 1){
      setCurrentIndex(currentIndex + 1)
    }
  }
    return(
      
        <div className="App flex-container" >
          <button onClick={goToPreviousImage}>Previous</button>
        {
          galleryData.map((image, index) => (
          <div key={image.id} className={`image-gallery-item ${index === currentIndex ? 'active' : '' }`}>
              <ReactImageMagnify 
              goToNextImage={currentIndex}
              goToPreviousImage={currentIndex}
              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 />
      </div>
      

    );
    
 };
 export default Image;
2

Can you share any other troubleshooting information? Like console.log() outputs, browser console messages anything at all that shows the behaviour or what troubleshooting you’ve done?

You just wrote all this code and nothing happened?

What happens?

3
  • try using using console.log to see if this code snippet gets called or not
  • what happens when you do that?

happy coding :slight_smile:

4

there is no error message anywhere. it is not just behaving the way it suppose to

5

How does it behave.

Use console.log() to print off your variables to see if they are changing or if your functions are being called.

6

console is not logging anything out

7

the next or previous image does not show

8

Can you share your updated code so we can see where you added the console.log() lines?

If it shows nothing, add more console.log() lines to see where the program stops. You can add one at the very beginning to make sure that your code runs at all.

console.log("Code starts executing")

This is a basic troubleshooting technique that you should be using

9 
import ReactImageMagnify from '@blacklab/react-image-magnify';
import galleryData from '../GalleryData';
import  '../App.css';
import { useState } from 'react';
 

function Image(){
  const [images, setImages] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  console.log('executing')

  const goToPreviousImage = ()=>{
  
    if (currentIndex > 0){
      setCurrentIndex(currentIndex - 1)
    
    }
   
  };
  console.log('second executing')
 

  const goToNextImage = () =>{
    if(currentIndex < images.length - 1){
      setCurrentIndex(currentIndex + 1)
      
    }
  }
  console.log('third excuting')

    return(
      
        <div className="App flex-container" >
          <button onClick={goToPreviousImage}>Previous</button>
        {
          galleryData.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>
      </div>
      

    );
    
 };
 export default Image;
10

For the first code. Where did you see ReactImageMagnify accepting the two props you are passing currentIndex to? Besides, the component lib doesn’t seem to have anything to do with a carousel/slideshow.

https://github.com/gooftroop/react-image-magnify/blob/69959643243c9b5113b6460bc6d30716da856704/src/types.ts#L138

In the second code you posted, you are using currentIndex for is a class name, and we have no way of knowing what that does. A carousel/slideshow is usually a container with a scroll overflow where you move the content using a transform.

Please post a repo with all your code.