Cannot display from layout.js to index.js use children

Question

I have Layout.js, this is the Code

import Layout from '../components/Layout';

export default function Home(){
   
      <Layout>
         test
      </Layout>
   
}

So i want to use children to display test in my browser, this is my index.js

import { useSession, signIn, signOut } from 'next-auth/react';
import Nav from '../components/Nav';

export default function Layout({ children }) {
  const { data: session } = useSession();

  if (!session) {
    return (
      <div className="bg-blue-900 w-screen h-screen flex items-center">
        <div className="text-center w-full">
          <button onClick={() => signIn('google')} className="bg-white px-4 p-2 rounded-lg text-black">
            Login With Google
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-blue-900 min-h-screen flex">
      <Nav />
      <div className="bg-white flex-grow mr-2 mt-2 text-black rounded-lg p-4">{ children }</div>
    </div>
  );
}

If I refresh my browser, test in layout.js not display, can anyone help me?

chesiren · Accepted Answer · 2023-06-08 07:36:35Z

0

In your home component you need to put your elements in a return, otherwise it won't render

export default function Home(){
    return (
        <Layout>
            test
        </Layout>
    );
}

answered Jun 8, 2023 at 7:36

chesiren

661 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot display from layout.js to index.js use children

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related