loading table of contents...

Headless Server Developer Manual / Version 2310

Table Of Contents PageGridPlacement Component

For this example app the resulting web page will look very basic. So for any banner, it renders only the teaserTitle and teaserText. How to render an image is described in the following section.

const divStyle = {
  border: '1px solid black',
  margin: '10px',
  padding: '10px'

function PageGridPlacement(props) {
  const name =;
  const items = props.items || [];
  return (
    (items.length > 0 &&
    <div className={name} style={divStyle}>
      <h1>Placement: {name}</h1>
      { => (
        ((item.teaserTitle || item.teaserText) && <div style={divStyle}>

Example 14.7. The PageGridPlacement Component

pwa example homepage

Figure 14.1. Screenshot of the example homepage



Writing everything in one component can quickly lead to large and messy files. To prevent this, the query can be imported from a separate file in the components folder.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.