Alforoan
Alforoan2y ago

✅ – 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
Jump to solution
44 Replies
Alforoan
AlforoanOP2y 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
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
like i fetched the api and made a component that renders each movie
Alforoan
AlforoanOP2y ago
kinda like that
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
button, image, title, date
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
i have it on the same page
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
they r all on the same page
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
well im not sure if i know 100% what u mean
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
i have a state thats set as false its set to true if i click on that button
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
oh i see what u mean how would i do that tho
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y 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
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
fk. i cant combine the two?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
so i need to have app.js that renders <Movies /> and Movies.js will render <Movie/> ?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
also how did u do the color thing
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
reactibot
reactibot2y ago
Attaching Code
Please don't post code in screenshots or post unformatted code. Instead, use one of these preferred methods to share code: ```js // short code snippets go here ``` Link a Gist to upload entire files: https://gist.github.com Link a Code Sandbox to share runnable examples: https://codesandbox.io/s Link a Code Sandbox to an existing GitHub repo: https://codesandbox.io/s/github/<username>/<reponame> Link a TypeScript Playground to share types: https://www.typescriptlang.org/play Link a Snack to share React Native examples: https://snack.expo.io
Alforoan
AlforoanOP2y ago
o i see thx. should that contain the state?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
sry im kinda confused. y is the way i was doing originally not working?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y 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
Alforoan
AlforoanOP2y ago
Alforoan
AlforoanOP2y 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
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y 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.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
ok , but it still not working
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
ah ofc
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Alforoan
AlforoanOP2y ago
i finally got it working by making Movies.js and Movie.js as u said earlier. thank u
reactibot
reactibot2y ago
This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1060068952253927456
reactibot
reactibot2y ago
This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1060068952253927456 Question not getting answered? Maybe it's hard to answer, or maybe you asked at a slow time. Check out these resources for help asking a good question: https://stackoverflow.com/help/how-to-ask http://wp.me/p2oIwo-26