[SOLVED]-USE STATE NOT UPDATING AS EXPECTED-REACTJS
USE STATE NOT UPDATING AS EXPECTED-REACTJS
you’re using the array index as your key prop when you’re mapping your array.
you should use an id that is specific to the data that you’re rendering. react uses the key prop to know which items have changed since the last render.
in your case you should use the movie id in your key prop instead of the array index.
popularmovies.map((movie) => (
<div key={movie.id} classname="card">
<div classname="image">
<img src={imageuri + 'w500' + movie.poster_path} />
</div>
<p>{movie.title}</p>
</div>
));
getpopular('movie');or you could not call the function at all and add genre as a dependency of your useeffect. that way the useeffect will run each time the genre change.
useeffect(() => {
getpopular();
}, [genre]);
const popular = ({ imageuri }) => {
const [popularmovies, setpopularmovies] = usestate('');
const [genre, setgenre] = usestate('movie');
const getpopular = async (moviegenre) => {
const response = await axios.get(
`https://api.themoviedb.org/3/discover/${moviegenre}?sort_by=popularity.desc&api_key=${api_key}`
);
setpopularmovies(response.data.results);
};
useeffect(() => {
getpopular();
}, [genre]);
const changehandler = (el) => {
let getgenre = el.target.dataset.genre;
setgenre(getgenre);
};
const ismovieselected = genre === 'movie';
const istvselected = genre === 'tv';
return (
<section classname="container movie-list">
<div classname="flex">
<movieheader>what's popular</movieheader>
<div classname="switch flex">
<toggle onchange={changehandler} selected={ismovieselected}>
in theaters
</toggle>
<toggle onchange={changehandler} selected={istvselected}>
on tv
</toggle>
</div>
</div>
<div classname="scroller">
<div classname="flex flex--justify-center">
<div classname="flex flex--nowrap container u-overscroll">
{popularmovies.map((movie) => {
const { title, id, poster_path } = movie;
return (
<movieitem
title={title}
imageuri={imageuri}
key={id}
poster_path={poster_path}
/>
);
})}
</div>
</div>
</div>
</section>
);
};
export default popular;
const toggle = (props) => {
const { children, onchange, selected } = props;
const classname = selected ? 'switch--option selected' : 'switch--option';
return (
<div classname={classname}>
<h3>
<a
data-genre="movie"
onclick={onchange}
classname="switch--anchor"
>
{children}
</a>
</h3>
<div classname="background"></div>
</div>
);
};
const movieheader = (props) => {
const { children } = props;
return (
<div classname="movie-list__header">
<h3>{children}</h3>
</div>
);
};
const movieitem = (props) => {
const { title, imageuri, poster_path } = props;
return (
<div key={idx} classname="card">
<div classname="image">
<img src={imageuri + 'w500' + poster_path} />
</div>
<p>{title}</p>
</div>
);
};