Get items from rendering datasource in JSS

Question

I have rendering that has been wrote in React and JSS. Sitecore displays rendering with static content. Is there any example how to get rendering datasource items and display Link fields from them under static content of rendering?

Answer 1

The JSS styleguide includes the Link example that outlines various uses of the Link component in React.

In short, your JSS component is passed props.fields that gives you access to any link fields that you've defined on your datasource template:

import { Link } from '@sitecore-jss/sitecore-jss-react';

const UsageLink = (props) => (
    <Link field={props.fields.myLinkFieldName} />
);

Answer 2

If your DataSource item is just a folder item and if you would like to retrieve the child items available under the datasource folder then you may also use the GraphQL.

Query will be something like below.

query RetrieveContentBlocks($itemPath: String = "/sitecore/content/poc-app/Content Blocks") {
  rootItem: item(path: $itemPath)
  {
    children
    {
      linkValue: field(name:"customlink")
      {
        jss
      }
    }
  }
}

You can render something like the below..

     <ul>
      {rootItem.children.map((child) => (
        <li key={child.name}>
          <Link field={child.linkValue.jss} />
        </li>
      ))}
    </ul>

instead of the jss property you can also retrieve the "text", "target", "url" properties and render the link on your own.