CODEWITHSUNDEEP
javascriptnode.jsreactjsnext.js
user9817924
user9817924

Reputation:

Nextjs send data (title of page) to component

I am trying to set custom title for each page in my next.js project.

Let's say this is my simple Layout

const MainLayout = props => {

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Head>
        <title>I AM TITLE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>
      <Layout>
        <Content>{props.children}</Content>
        <FooterView />
      </Layout>
    </Layout>
  );
};

export default withTranslation('common')(MainLayout)

And login page.

import MainLayout from "../../components/layout/Layout";

class NormalLoginForm extends React.Component {

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <MainLayout>
        // LOGIN FORM
      </MainLayout>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);

export default WrappedNormalLoginForm;

I just can't find the way (i am still new into this) how to send title from login page to layout like a variable. Thank you for any help.

Upvotes: 1

Views: 3328

Answers (1)

Jonathan Irvin
Jonathan Irvin

Reputation: 1062

You are going to want to pass in the title as a prop. 

<MainLayout title='Login Page'>
  // LOGIN FORM
</MainLayout>

<title>{props.title}</title>

You can also pass in a title as a dynamic variable:

<MainLayout title={loginPageTitle}>
  // LOGIN FORM
</MainLayout>

Upvotes: 2

Related Questions