Alforoan•2y 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

Jump to solution

44 Replies

AlforoanOP•2y 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•2y ago

Message Not Public

AlforoanOP•2y ago

like i fetched the api and made a component that renders each movie

AlforoanOP•2y ago

https://gyazo.com/03fcb4e1b923d176c7ff690caa05f245

Gyazo

AlforoanOP•2y ago

kinda like that

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

button, image, title, date

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

i have it on the same page

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

they r all on the same page

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

well im not sure if i know 100% what u mean

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

i have a state thats set as false its set to true if i click on that button

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

oh i see what u mean how would i do that tho

Unknown User•2y ago

Message Not Public

AlforoanOP•2y 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•2y ago

Message Not Public

AlforoanOP•2y ago

fk. i cant combine the two?

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

so i need to have app.js that renders <Movies /> and Movies.js will render <Movie/> ?

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

also how did u do the color thing

Unknown User•2y ago

Message Not Public

reactibot•2y 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

AlforoanOP•2y ago

o i see thx. should that contain the state?

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

sry im kinda confused. y is the way i was doing originally not working?

Unknown User•2y ago

Message Not Public

AlforoanOP•2y 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

AlforoanOP•2y 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•2y ago

Message Not Public

AlforoanOP•2y 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•2y ago

Message Not Public

AlforoanOP•2y ago

ok , but it still not working

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

ah ofc

Unknown User•2y ago

Message Not Public

AlforoanOP•2y ago

i finally got it working by making Movies.js and Movie.js as u said earlier. thank u

reactibot•2y 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•2y 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

✅ – Alforoan – 05-35 Jan 4

Did you find this page helpful?