CODEWITHSUNDEEP
javascriptreactjs
Intaek
Intaek

Reputation: 526

A right way to use uuid as key in React?

I was fetching videos from an API and there were duplicates. So, I applied uuid to generate a key for each - key={uuid()} - until realizing that I was generating a new key for every render.

Below is my fix, but I am not quite sure if it's really solving the issue.

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  const videoList = videos.map((video, index) => {
    video.uuid = uuid();

    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={video.uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

Edit: I know that using an id from db or creating a combination within the given data is more preferable. But I just want to know if there is a way to generate a stable key with uuid.

Upvotes: 1

Views: 3731

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

The correct way would be to get the id directly from wherever you are getting the videos.

The next one, would be to generate them the moment you receive them from the remote location (assuming you get them from an API). So, right after getting them, enrich them with the uuid, and then store them to the state/store.

The third solution, would be to use a useEffect inside your component, that would only generate ids when the video property is altered.

export default function VideoList({
  videos = [],
  observedElement
}) {
  const location = useLocation();
  const [videosWithId, setVideosWithId] = useState(videos);

  useEffect(() => {
    const withId = videos.map(video => ({
      ...video,
      uuid: uuid()
    }))
    setVideosWithId(withId);
  }, [videos]);

  // use videosWithId from below this point, instead of the videos prop
  ....

}

Upvotes: 5

Enfield Li
Enfield Li

Reputation: 2530

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  videos.forEach(video => video.uuid = uuid()); // loop through the list and generate the id
  
  const videoList = videos.map((video, index) => {
    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={video.uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

Upvotes: 0

Eisa Rezaei
Eisa Rezaei

Reputation: 553

define a variable that holds the value of uuid like this and use it I think it will work for you

export default function VideoList({ videos, observedElement }) {
  const location = useLocation();

  const videoList = videos.map((video, index) => {
    let uuid = uuid()
    video.uuid = uuid 

    return (
      <Link
        to={`/videos/${video.id.videoId}`}
        state={{ backgroundLocation: location }}
        key={uuid}
      >
        <VideoListEntry info={video} ref={observedElement} />
      </Link>
    );

  return <div>{videoList}</div>
}

Upvotes: 0

Related Questions