Question 52784 in Javascript Question posted in
A very good W3school tutorial can be found here.

What is the solution to NextJs Error: "Title element received an array with more than 1 element as children." – Javascript

Creating a component to wrap every page with the hope of receiving children and title for each page is throwing error. "Title element received an array with more than 1 element as children."

import Head from "next/head";

interface IProps {
  children: JSX.Element;
  title?: string;
  restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
  const {
    children,
    title = "Generated by create next app",
    ...restProps
  } = props;

  return (
    <>
      <Head>
        <title>CV-stack - {title}</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>{children}</main>
    </>
  );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I saw a solution online on this link.

    Below is the sample code that works:

    import Head from "next/head";

interface IProps {
  children: JSX.Element;
  title?: string;
  restProps?: any;
}
export default function MetaDataContainer(props: IProps) {
  const {
    children,
    title = "Generated by create next app",
    ...restProps
  } = props;

  return (
    <>
      <Head>
        <title>{`CV-stack - ${title}`}</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>{children}</main>
    </>
  );
}

    Notice that the title is now a single node with {CV-stack - ${title}} instead of CV-stack - {title}


  2. 0

    You need to provide an object like so

    <title>{`CV-stack - ${title}`}</title>

    Because of the reasons explained in this comment (react dom string rendering) https://github.com/vercel/next.js/discussions/38256

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search