Hi there. Does anyone have an example of app on how to display a landing page type with linked entries? I know how to create an app with repeatable content like blog posts but I wanted to see someone else’s approach to creating landing pages with content being delivered from Contentful.
For example, I have a landing page content type with other linked modules like a hero section (text field + image), or a CTA (text field). I was trying to figure out how I’d approach these in the code and the most basic way I could think of was to use conditionals to check if X module is being used and then display it. For reference, I’m building my app using React. Thanks!
Hi @gisete,
A good starting would point would be to have a landing page content type and thus entry that references the necessary elements by creating links into this parent item (CTA, hero section, etc).
Could you explain the following use case in a bit more detail?
In general, you’d be able to perform queries with the API itself that wouldn’t require additional parsing and the conditional statements would usually be tied to the API call themselves.
Hi @gabriel thanks for the reply.
So, lets say in Contentful I have a landing page content type that has these fields: a title (short text), slug (short text) and a hero module (reference). The hero module refers to the Hero content type that contains two short text fields.
In my react app I’d have a component called ‘hero’ that contains an H1 tag and a P tag.
My question is: how in the code I check to see if the hero module was used in the landing page content type and then if so populate my React component with the content. I have a vague idea but would love to see an example.
During a call with a Contentful I remember they showcased a small app like this, where you created landing pages for a hotel chain. I’d love to take a look at that code.
@gisete I would create a function that has a switch case that returns the component that you would like to render:
typeToRender(type, key, data) {
case ‘type1’:
return <component 1 data={data} key={key} />
break
case ‘type2’:
return <component 2 data={data} key={key} />
break
default:
console.log(‘no match found’);
}