I'm doing a project in React, and on my "Home.js" page I would like to display a pokemon randomly for 24 hours thanks to the PokeApi (https://pokeapi.co/). But I can't add the fact that the Pokemon image should be displayed for 24 hours.
For now I have already tried this, it displays an image but it changes when you refresh the page.
Here is my line of code so far:
Home.js :
<div className="rightPane">
{dataPkmn && dataSpecies ? <PokemonDuJour id={Math.floor(Math.random() * (898 - 1)) + 1} /> : <div></div>}
</div>
Can you help me please to know what should I add in my code? thank you in advance for your help
PokemonDuJour.js
const PokemonDuJour = (props) => {
const param = useParams()
const [pkmnId, setPkmnId] = useState();
const [img, setImg] = useState(String);
const [name, setName] = useState(String);
const [type1, setType1] = useState("");
const [type2, setType2] = useState("");
const [data, setData] = useState();
const [species, setSpecies] = useState();
//REDUX
const dataPkmn = useSelector((state) => state.dataPkmn.pkmn)
const dataSpecies = useSelector((state) => state.dataPkmn.species)
const navigate = useNavigate();
const handleClick = () => {
if (pkmnId) {
setType1("")
setType2("")
navigate("/pokemon/" + pkmnId);
}
}
useEffect(() => {
if (data && species) {
if (data.sprites.other.dream_world.front_default != null) {
setImg(data.sprites.other.dream_world.front_default)
} else if (data.sprites.other.home.front_default != null) {
setImg(data.sprites.other.home.front_default)
}
setType1(data.types[0].type.name)
if (data.types.length > 1) {
setType2(data.types[1].type.name)
}
setPkmnId(data.id)
species.names.forEach(element => {
if (element.language.name == "fr") {
setName(element.name)
}
});
}
}, [data && species]);
useEffect(() => {
if (dataPkmn) {
setData(dataPkmn.payload[props.id - 1])
}
}, [dataPkmn && param])
useEffect(() => {
if (dataSpecies) {
setSpecies(dataSpecies.payload[props.id - 1])
}
}, [dataSpecies && param]);
return (
<div className='card' >
{
data ?
<div className="pkmnDuJour" onClick={handleClick}>
<p className='pkmnName'>{name}</p>
<img src={img} alt="pkmnImage" className='pkmnImage' />
</div>
:
<div></div>
}
</div>
);
};
export default PokemonDuJour;
