✅ – Alforoan – 05-35 Jan 4

So I've rendered a bunch of movies from an api and would like a button (that each movie has) to change its state (prev => !prev) every time i click on a button but only for one movie not all. I've tried filtering by passing in id but the warning says encountered two children with same key(id) and idk how to fix that
Solution:
Message Not Public
Sign In & Join Server To View
A
Alforoan469d ago
const handleClick = (id) => {
if (movies.id === id) {
setInfoClicked((prev) => !prev);
}
};
const handleClick = (id) => {
if (movies.id === id) {
setInfoClicked((prev) => !prev);
}
};
this is what i have
UU
Unknown User469d ago
A
Alforoan469d ago
like i fetched the api and made a component that renders each movie
A
Alforoan469d ago
kinda like that
UU
Unknown User469d ago
A
Alforoan469d ago
button, image, title, date
UU
Unknown User469d ago
A
Alforoan469d ago
i have it on the same page
UU
Unknown User469d ago
A
Alforoan469d ago
they r all on the same page
UU
Unknown User469d ago
A
Alforoan469d ago
well im not sure if i know 100% what u mean
UU
Unknown User469d ago
A
Alforoan469d ago
i have a state thats set as false its set to true if i click on that button
UU
Unknown User469d ago
A
Alforoan469d ago
oh i see what u mean how would i do that tho
UU
Unknown User469d ago
A
Alforoan469d ago
const Movies = ({ movies }) => {
const [infoClicked, setInfoClicked] = React.useState(false);
const handleClick = (id) => {
if (movies.id === id) {
setInfoClicked((prev) => !prev);
}
};

return (
<div>
{movies.map((movie) => {
const { id, adult, title, vote_average, poster_path, release_date } =
movie;
return (
<article key={id}>
<button onClick={handleClick}>stuff</button>
{infoClicked ? <Info /> : ""}
<div>
<img
src={`https://image.tmdb.org/t/p/w500${poster_path}`}
alt={title}
/>
<p>{vote_average}</p>
<h2>{title}</h2>
<p>{release_date}</p>
</div>
</article>
);
})}
</div>
);
};
const Movies = ({ movies }) => {
const [infoClicked, setInfoClicked] = React.useState(false);
const handleClick = (id) => {
if (movies.id === id) {
setInfoClicked((prev) => !prev);
}
};

return (
<div>
{movies.map((movie) => {
const { id, adult, title, vote_average, poster_path, release_date } =
movie;
return (
<article key={id}>
<button onClick={handleClick}>stuff</button>
{infoClicked ? <Info /> : ""}
<div>
<img
src={`https://image.tmdb.org/t/p/w500${poster_path}`}
alt={title}
/>
<p>{vote_average}</p>
<h2>{title}</h2>
<p>{release_date}</p>
</div>
</article>
);
})}
</div>
);
};
i think thats p simple
UU
Unknown User469d ago
A
Alforoan469d ago
fk. i cant combine the two?
UU
Unknown User469d ago
A
Alforoan469d ago
so i need to have app.js that renders <Movies /> and Movies.js will render <Movie/> ?
UU
Unknown User469d ago
A
Alforoan469d ago
also how did u do the color thing
UU
Unknown User469d ago
A
Alforoan469d ago
o i see thx. should that contain the state?
UU
Unknown User469d ago
A
Alforoan469d ago
sry im kinda confused. y is the way i was doing originally not working?
UU
Unknown User469d ago
A
Alforoan469d ago
well not really so basically the purpose of that button is once i click on it i have an option to make it a favorite or add to my watch list
A
Alforoan469d ago
A
Alforoan469d ago
soi got it working my destructuring my id inside
const handleClick = ({ id })
const handleClick = ({ id })
but not sure y it does that it still gives me the warning tho 💀 actually nvm it makes every movie pop out the two buttons
UU
Unknown User469d ago
A
Alforoan469d ago
ya i still get this
Encountered two children with the same key, `1013860`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Encountered two children with the same key, `1013860`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
UU
Unknown User469d ago
A
Alforoan469d ago
ok , but it still not working
UU
Unknown User469d ago
A
Alforoan469d ago
ah ofc
UU
Unknown User469d ago
A
Alforoan469d ago
i finally got it working by making Movies.js and Movie.js as u said earlier. thank u
UU
Unknown User468d ago