I have this react component (rendering) which has a data source (a folder with items).

Is there any way to get those items and render their fields in react component?

In props was passed dataSource Id(this.props.rendering.dataSource).

  • Do you mean, something like a Carousel component? – Hugo Santos Feb 3 '19 at 1:09

From the official documentation:

UI Components

UI components are the most important part of the JSS app. Thankfully, they are no different from any other React component - except that they are dynamically added inside a Placeholder component, which provides them with an ambient fields prop.

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

const Welcome = ({ fields }) => (
    <Text field={fields.title} />

export default Welcome;

All that said, it looks like you have this parent component which as children subcomponents.

In this case, just create one parent react component that will receive the folder item as datasource.

And then, on this component, create one react sub-component for each folder's child.

If you still need a real example to better understand, I really like this one from TechGuilds, on which they show how to create a Carousel component which looks like exactly what you need.

  • Thank you. Problem is that I want to iterate over folder get item get it fields and show data from fields, but all information I have in props is id of data source folder and content author can add new items to folder and new item's data must be displayed without changing code. In Carousel new items data is added manually in yaml file. – Антон Достоевский Feb 3 '19 at 8:07
  • Forget about the yaml, this is for learning purpose only. In the real world this data will come from Sitecore. They are going to show that in part 4. However, check this another link: sitecorenutsbolts.net/2017/10/30/…. It shows how to connect the JSS react application with your Sitecore. – Hugo Santos Feb 3 '19 at 10:24

In my case i just used the GraphQL, something like the below.

Path of my folder item is passed as parameter [hope you might be able to retrieve by ID as well] and i navigated through the child items of this folder and retrieved the fields which we wanted to render.

query RetrieveContentBlocks($itemPath: String = "/sitecore/content/poc-app/Content Blocks") {
  dataSourceFolderItem: item(path: $itemPath)
      headingValue: field(name:"heading")
      contentValue: field(name:"content")

Note - I used the above query in my jss component but i guess this can be used in the plain react as well.


The way I solved my problem is that I checked Datasource Item Children Resolver option of my rendering in Sitecore admin panel, Layout Service tab, Rendering contents resolver menu. After that component gets props with array of items in data source folder instead of id of datasource folder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.