I'm trying to create an array of non-repeating random values. The intention is to generate this array and map it to return random images but have them not repeat in a slide show. The current issue is that it only checks with conditionals, how could I make this more dynamic? I have tried recursion and it maxed out the call stack.
//arr =[img_src_0, img_src_1, img_src_2,...img_src_41]
export default function randomTechList(arr){
const max = arr.length-1
let array = []
for(let i = 0; i <=max; i++){
let randomIdx = Math.floor(Math.random() * max) + 1
if(array.includes(randomIdx)){
let newRandom = Math.floor(Math.random() * max) + 1
if(array.includes(randomIdx)){
let newRandom = Math.floor(Math.random() * max) + 1
if(array.includes(randomIdx)){
//stoped here
}else{
array.push(newRandom)
}
}else{
array.push(newRandom)
}
}else{
array.push(randomIdx)
}
}
console.log(array)
return array
}
React.JS file
import Carousel from 'react-bootstrap/Carousel';
import { techList } from './img/techList.js';
import randomTechList from './globalFunctions/randomTechList.js';
export default function SlideShow() {
let randomIdx = randomTechList(techList)
return(
<div className='openingCarusel'>
<Carousel>
{randomIdx.map((item, idx)=>{
return(
<Carousel.Item interval={50} className="imgContainer" key={idx}>
<img
className="d-block w-10 openingIMG"
src={techList[item]}
alt={`slide_${idx}`}
id={`slide_img_${idx}`}
/>
</Carousel.Item>
)
})}
</Carousel>
</div>
);
}