Looping Through a set of Images on Button Click with Next Js

I have a folder of six images that I would like to loop through when the "update profile picture" button is clicked. I've been having some issues with props in Next Js and any help would be greatly appreciated.

import styles from '../styles/ProfileShowcase.module.scss'
import Image from 'next/image'
import proPic from '../public/img/avatars/mask_avatars_four.png'
import GameLog from '../pages/Logs.js'
import useUser from '../lib/useUser';
import one from '/public/img/avatars/mask_avatars_one.png'
import two from '/public/img/avatars/mask_avatars_two.png'
import three from '/public/img/avatars/mask_avatars_three.png'
import four from '/public/img/avatars/mask_avatars_four.png'
import five from '/public/img/avatars/mask_avatars_five.png'
import six from '/public/img/avatars/mask_avatars_six.png'

const ProfileShowcase = () => {

  const profileLoop = () => {

        let avatars = [{one}, {two}, {three}, {four}, {five}, {six}];
        var keys = Object.keys(avatars);
        let randomMask = avatars[keys[ keys.length * Math.random() << 0]];
        console.log(randomMask);
        
    }
  
    return (
        <>
          
          <div className={styles.top_container}>

                <div className={styles.img_wrap}>
                    <Image src={proPic} />
                    <button className={styles.btn_update} onClick={profileLoop}>update profile picture</button>
                </div>
          </div>

          {/* <div className={styles.bottom_container}>
            <GameLog />
          </div> */}

          
          
        </>
    )
}

export default ProfileShowcase


Read more here: https://stackoverflow.com/questions/68448857/looping-through-a-set-of-images-on-button-click-with-next-js

Content Attribution

This content was originally published by ZaneGilfillan at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: