✅ – Alforoan – 05-35 Jan 4

AAlforoan

1/4/2023

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

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

Solution:

Message Not Public

Jump to solution

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

like i fetched the api and made a component that renders each movie https://gyazo.com/03fcb4e1b923d176c7ff690caa05f245 kinda like that

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

button, image, title, date

UUUnknown User

1/4/2023

3 Messages Not Public

AAlforoan

1/4/2023

i have it on the same page

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

they r all on the same page

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

fk. i cant combine the two?

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

also how did u do the color thing

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

o i see thx. should that contain the state?

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

3 Messages Not Public

AAlforoan

1/4/2023

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

AAlforoan

1/4/2023

AAlforoan

1/4/2023

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

UUUnknown User

1/4/2023

2 Messages Not Public

AAlforoan

1/4/2023

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.

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

ok , but it still not working

UUUnknown User

1/4/2023

Message Not Public

AAlforoan

1/4/2023

ah ofc