i'm new to react development i'm creating 2 tab using Navs and tabs to display data retrieved from api in cards ..i'm trying to restart animation made by framer-motion to the tab content on tab-click but it animate once only, i think the answer is related to component lifecycle at tracking update phase but i'm little overwhelmed..any help ??
import React, { useEffect, useState } from 'react'
import { motion,AnimatePresence } from "framer-motion"
import './AllPlatforms.css'
import axios from 'axios';
import PCTabContent from '../PCTabContent/PCTabContent';
export default function AllPlatforms() {
let[gamesList,setGamesList] = useState([]);
//to set animation for active tab
let [activeClass, setActiveClass] = useState("");
//function to get active tab
function getActiveTab(e){
console.log("tab clicked!!");
console.log(e.target.id);
setActiveClass(e.target.id)
}
// useEffect(()=>{},[activeClass])
const itemVariants = {
hidden: {opacity:0,
x:-50,
},
visible:(custom)=>({
opacity:1,
x:0,
transition:{delay:custom,
duration:0.5,
ease: "linear",
type:"spring"
}
})
}
useEffect(()=> {
getAllGames();
},[activeClass])
async function getAllGames(){
let config = {
headers :{
'x-rapidapi-host': 'free-to-play-games-database.p.rapidapi.com',
'x-rapidapi-key': 'b52128808dmsh5826403ec30ac21p1b9548jsnfca5769e0b68'
}
}
let {data} = await axios.get(`https://free-to-play-games-database.p.rapidapi.com/api/games?category=flight`,config);
console.log(data);
setGamesList(data);
}
return (
<div className='allPlatforms'>
<div className="container">
<div className="row">
<div className="col-md">
<ul className="nav nav-tabs" id="myTab" role="tablist">
<li className="nav-item" role="presentation">
<button className="nav-link active" id="pc-tab" data-bs-toggle="tab" data-bs-target="#pc-tab-pane" type="button" role="tab" aria-controls="pc-tab-pane" aria-selected="true" onClick={getActiveTab}>pc</button>
</li>
<li className="nav-item" role="presentation">
<button className="nav-link" id="browser-tab" data-bs-toggle="tab" data-bs-target="#browser-tab-pane" type="button" role="tab" aria-controls="browser-tab-pane" aria-selected="false" onClick={getActiveTab}>browser</button>
</li>
</ul>
<div className="tab-content" id="myTabContent">
<div className="tab-pane fade show active" id="pc-tab-pane" role="tabpanel" aria-labelledby="pc-tab" tabIndex="0">
{/* <PCTabContent list={gamesList} itemVariants={itemVariants}/> */}
<div className="row gy-5">
{gamesList.map((game,index)=>{
return <motion.div className="col-lg-4" key={index} variants={itemVariants} initial="hidden" animate="visible" custom={index +1 * 0.1}
>
<div className="card mx-2">
<img className="card-img-top" src={game.thumbnail} alt=""></img>
<div className="card-body">
<h5 className="card-title">{game.title}</h5>
<p className="card-text">{game.short_description}</p>
</div>
</div>
</motion.div>
})}
</div>
</div>
<div className="tab-pane fade" id="browser-tab-pane" role="tabpanel" aria-labelledby="browser-tab" tabIndex="0">
<div className="row gy-5">
{gamesList.map((game,index)=>{
return <motion.div className="col-lg-4" key={index} variants={itemVariants} initial="hidden" animate="visible" custom={index +1 * 0.1}
>
<div className="card mx-2">
<img className="card-img-top" src={game.thumbnail} alt=""></img>
<div className="card-body">
<h5 className="card-title">{game.title}</h5>
<p className="card-text">{game.short_description}</p>
</div>
</div>
</motion.div>
})}
</div>
</div>
</div>
</div>
</div>
</div>
{/* <main role="main" className="container">
<div className="row">
<div className="col-md">
<div className="starter-template">
<ul className="nav nav-tabs" id="myTab" role="tablist">
<li className="nav-item">
<a className="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li className="nav-item">
<a className="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div className="tab-content" id="myTabContent">
<div className="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3>Tab 1 Content</h3>
<div className="card-columns">
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1490261739438-981517eafb2e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=ab1a1d09d3cdcd618d51691e27adc66e" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1513569536235-bf46baacc948?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=9087de94911f2bff7c66b37b476d9a71" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1512281921271-a5004a8e8e2b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=c9d71484dab165e928166d3975600e7f" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div className="tab-pane fade masonry-container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3>Tab 2 Content</h3>
<div className="card-group">
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1501743029101-21a00d6a3fb9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=04fc74cb01d267c20b706d27c2c493e5" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1488740304459-45c4277e7daf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=49bcc37a7a6a0de2eb984e74d19f472d" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1482066490729-6f26115b60dc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=3f77fa1436c24f2227c3b69ba66cd088" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div className="tab-pane fade masonry-container" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h3>Tab 3 Content</h3>
<div className="card-group">
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1433162653888-a571db5ccccf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=459d195af49a3331fd7815ce743fd4c8" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1494947665470-20322015e3a8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=e0a403101d9ddf75a0ff3fffdaac3e77" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div className="card">
<img className="card-img-top" src="https://images.unsplash.com/photo-1507682520764-93440a60e9b5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=11800f8d2bc199aa310594f9ea4406eb" alt=""></img>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main> */}
</div>
)
}
i'm trying to use useEffect hook and track updates of the gameList but i'm unable to reach my goal
