---
title: "Display the event page"
slug: "display-the-event-page"
abstract: "How to see the end result and display the events page."
---
# Display the event page

We're almost there. Now that you have extended the [content model](https://doc.sitecore.com/ch-one/en/developers/content-hub-one/build-a-website-with-the-starter-kit/6-open-the-website/implement-the-graphql-query.md "Implement the GraphQL query") and all the elements are in place, you can open the website and view the event page.

![event page example](https://doc.sitecore.com/api/markdown-image/ch-one/en/developers/content-hub-one/images/event_page_example.png)

> [!note]
> You can see the event ID in the `Details` section of the event details page. Go to Content Hub ONE and, on the menu bar, click `Content`. From the `Content type` filter list, click `Event`, and then click the event to open its details page.

To display the event page:

1. In Visual Studio Code, open the starter kit repository and go to the */pages* folder.
2. Make a copy of the *index.tsx* page and name it *event.tsx*.
3. In the function, export async function getStaticProps, add the line `const event = await getEventById('YOUR_EVENT_ID')`, inserting the event ID from your Content Hub ONE instance.
4. Modify the header elements to display the event data:
    - Add the following import statements after line 2: `import Event from '../types/Events/events-type';` and `import RichText from '../components/Common/richText-component';`
    - Update the event object to display the `  h1  ` with `event.eventName`.
    - Update `event.eventImage?.results[0]?.fileUrl` for the hero banner.
    - Update `event.eventDescription` within a RichText Component. The event description is returned as a JSONContent object. Look at the `[slug].tsx` file located in the */pages/Recipes* folder to see that those JSONContent objects can be rendered using the `richText-component` passing the JSONContent.
    - Remove `import RecipeTeaserComponent from '../components/Recipe/recipeTeaser-component';`.
    - Remove `  RecipeTeaserComponent allRecipes={allHomepage[0].recipes}/  `.
5. Run `npm run dev`.

The final code should look like this.

<details>
<summary>event.tsx</summary>

```json
import Head from 'next/head'
import HeaderComponent from '../components/Homepage/header-component'
import Event from '../types/Events/events-type';
import RichText from '../components/Common/richText-component';
import stylesHp from '../styles/Homepage/Homepage.module.css';
import {getAllHomepage, getHomepageById} from "../lib/Homepage/homepage-lib";
import Homepage from "../types/Homepage/homepage-type";
import FooterComponent from '../components/Homepage/footer-component';
import Image from 'next/image';
import HeroBanner from '../components/Homepage/hero-banner';
import { HOMEPAGE_ID } from '../lib/Common/constants';
import { getEventById } from '../lib/Events/event-lib';

export async function getStaticProps({ preview = false}){
 const allHomepage = await getAllHomepage(preview);
 const homepage = await getHomepageById(HOMEPAGE_ID);
 const event = await getEventById(' YOUR_EVENT_ID ');
 return{
   props: {allHomepage, homepage, preview},
   // Next.js will attempt to re-generate the page:
   // - When a request comes in
   // - At most once every 10 seconds
   revalidate: 10, //in seconds
  }
}
type Props = {
 allHomepage: Homepage[];
 homepage: Homepage;
 event: Event;
}
const Homepage = ({allHomepage, homepage}: Props) = {
 //const homepage = allHomepage[0];

  return (
   div className={stylesHp.container}
     Head
      title Event /title
      meta name="description" content="Generated by create next app" /
      link rel="icon" href="/favicon.ico" /
     /Head

     main className={stylesHp.main}
      HeaderComponent
      allHeaders={homepage.header}
      /
      HeroBanner
       heroImageUrl={event.eventImage?.results[0]?.fileUrl}
       altText=''
      /

    div className={stylesHp.boxedContainer}
     h1 className={stylesHp.title}
      {event.eventName}
     /h1
     RichText
      richText={event.eventDescription}
     /

    /div

    FooterComponent
     allFooters={homepage.footer}
    /

   /main

  /div
 )
}

export default Homepage;
```

</details>

You can now navigate to `http://localhost:3000/event` to [open the website](https://doc.sitecore.com/ch-one/en/developers/content-hub-one/build-a-website-with-the-starter-kit/6-open-the-website/display-the-website.md "Display the website") and verify that everything works.