Access layout service response sitecore.context object in Layout.JS file

Question

In JSS react how to access the layout service response object sitecore.context in src/Layout.js.

If you look at src/Layout.js file, In default we can access only sitecore.route fields but not sitecore.context.

Answer 1

We can achieve this in one way.

Go to \src\RouteHandler.js here sitecore.context will be available.

Change the line like below, (This will pass context object to layout)

// Original line
return <Layout route={layoutData.route} />;
// Change this line
return <Layout route={layoutData.route} sitecoreContext={this.props.sitecoreContext} />;

Goto \src\Layout.js, change the line below

// Original line
const Layout = ({ route }) => {
// Change this line
const Layout = ({ sitecoreContext, route }) => {

We can access the sitecoreContext object now.

Answer 2

We can get Sitecore context using by importing sitecore-jss-react on the component

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

and use this service to access context item as follows:

const MyComponent = (props) => <div>Page editing: {props.sitecoreContext.pageEditing}</div>;
// wrap MyComponent in the HOC (note the double function invocation - important)
export default withSitecoreContext()(MyComponent);

You can get more detail from here

I hope it helps you.