Hye, Today I wanted to share how you can use findIndex in react js.
What is findIndex
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test. To simplify, it gives us the first index in an array that meets the function needs.
What Can you do with findIndex() In react js
You can create a Next and Previous button that can loop through an array. For Example, I have created a react app that will loop through an array of songs.
This is what the array will look like. I named the fileData.js
import { v4 as uuidv4 } from 'uuid';
function chillhop(){
return[
{
name:"Cruising",
artist:"Evil Needle",
cover:" https://chillhop.com/wp-content/uploads/2021/04/cb0cc6270d7f2e1bb13e44e8832bd5c9b2a61080-1024x1024.jpg",
id:uuidv4(),
active:true,
color:['#EC5C4D','#DEA25B'],
},
{
name:"Low Rider",
artist:"Evil Needle",
cover:"https://chillhop.com/wp-content/uploads/2021/04/cb0cc6270d7f2e1bb13e44e8832bd5c9b2a61080-1024x1024.jpg",
id:uuidv4(),
active:false,
color:['#EC5C4D','#DEA25B'],
},
{
name:"On The Moon",
artist:"SwuM",
cover:"https://chillhop.com/wp-content/uploads/2021/03/74d62bc9370a68e440c1b98eaf650344f0a7faea-1024x1024.jpg",
id:uuidv4(),
active:false,
color:['#283430','#513B32'],
}
]
}
export default chillhop;
next, in App.js set the songs using useState()
const [songs,setSongs]=useState(data());
then set the current displaying song also using useState()
const [currentSong,setCurrentSong]=useState(songs[0]);
The next thing you need to do is create a component named player.js
and create an event handler that will handle the next and previous buttons.
//Event Handler
const skipTrackHandler = async (direction)=>{
let currentIndex = songs.findIndex((song)=>song.id === currentSong.id);
if(direction === "skip-forward"){
await setCurrentSong(songs[(currentIndex+1)%songs.length]);
activeLibraryHandler(songs[(currentIndex+1)%songs.length]);
}
if(direction==="skip-back"){
if(((currentIndex-1)%songs.length===-1))
{
await setCurrentSong(songs[songs.length-1]);
activeLibraryHandler(songs[songs.length-1]);
if(isPlaying) audioRef.current.play();
return;
}
await setCurrentSong(songs[(currentIndex-1)%songs.length]);
activeLibraryHandler(songs[(currentIndex-1)%songs.length]);
}
if(isPlaying) audioRef.current.play();
};
and lastly also in player.js in return()
return (
<div className="player">
<div className="time-control">
<p>{getTime(songInfo.currentTime)}</p>
<div style={{background:`linear-gradient(to right,${currentSong.color[0]},${currentSong.color[1]})`}} className="track">
<input
min={0}
max={songInfo.duration || 0}
value={songInfo.currentTime}
onChange={dragHandler}
type="range"
/>
<div style={trackAnim} className="animate-track"></div>
</div>
<p>{songInfo.duration ? getTime(songInfo.duration) : "0:00"}</p>
</div>
<div className="play-control">
<FontAwesomeIcon onClick={()=>skipTrackHandler('skip-back')} className="skip-back" size="2x" icon={faAngleLeft}/>
<FontAwesomeIcon
onClick={playSongHandler}
className="play"
size="2x"
icon={isPlaying ? faPause : faPlay}/>
<FontAwesomeIcon onClick={()=>skipTrackHandler('skip-forward')} className="skip-forward" size="2x" icon={faAngleRight}/>
</div>
</div>
)
And that is it. You have used findIndex in react js. P.s. I have learned to use this by finishing Dev Ed React course https://developedbyed.com/. The course has helped me a lot in my journey of being a Front-end Developer.
Do Give your opinion and question and please give a like if it has helped you also as it will help me a lot. Thank You in Advanced.