close

Filter

loading table of contents...

Headless Server Developer Manual / Version 2404

Table Of Contents

14.2.3.3 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 = props.name;
  const items = props.items || [];
  return (
    (items.length > 0 &&
    <div className={name} style={divStyle}>
      <h1>Placement: {name}</h1>
      {items.map((item) => (
        ((item.teaserTitle || item.teaserText) && <div style={divStyle}>
          <h2>{item.teaserTitle}</h2>
          <p>{item.teaserText}</p>
        </div>)
      ))}
    </div>)
  );
}

Example 14.7. The PageGridPlacement Component


pwa example homepage

Figure 14.1. Screenshot of the example homepage


Note

Note

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
warning

Your Internet Explorer is no longer supported.

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