Next.js Discord

Discord Forum

Get error when using YouTube Embed

Unanswered
Little fire ant posted this in #help-forum
Open in Discord
Little fire antOP
I got an error like that

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <ThirdPartyScriptEmbed>. See https://reactjs.org/link/warning-keys for more information.
    at /frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:11:314912


I trying to set key for YouTubeEmbed element but not working
I using Next 13.5.6 and app router.

13 Replies

Little fire antOP
import React from "react";
import { YouTubeEmbed } from "@next/third-parties/google";
import { Spotify } from "react-spotify-embed";

type schema = {
  embed_url: string;
};

export function Iframe({ payload }: { payload: schema }) {
  const { embed_url } = payload;
  const renderIframe = () => {
    if (embed_url.includes("youtube") || embed_url.includes("youtu.be")) {
      const videoId = new URL(embed_url).searchParams.get("v");
      return <YouTubeEmbed videoid={videoId} width="560" height="315" />;
    } else if (embed_url.includes("spotify")) {
      return (
        <Spotify
          link="https://open.spotify.com/album/0fUy6IdLHDpGNwavIlhEsl?si=mTiITmlHQpaGkoivGTv8Jw"
          className="w-full h-[352px]"
        />
      );
    }
  };
  return <div className="my-[10px] flex justify-center">{renderIframe()}</div>;
}
I create component like that
in parent component, i don't using map or loop function to render it
Little fire antOP
do u have any comment?
riský
I havent had time to look at it much rn
Little fire antOP
if you have a time, please check it out
thanks
riský
@Little fire ant just wondering, if you use nextjs v14 how well does it go (as it was only really released for it)
Little fire antOP
I tried to use nextjs v14 but still got this error
riský
i think it is their issue as it seems like it is caused internaly
i think you should submit gh issue (if one isn't already there)
Little fire antOP
thanks a lot!