Content Hub Tip #41 | Forcing to render a component in React

  

In my previous post, I discussed how to force a page to render in React. However, there may be situations where you only want a specific component to utilize the React framework while keeping the rest of the page intact with Sitecore components. This option allows you to enjoy the enhanced features of React without rendering the entire page.

So, how can we achieve this? Let's go through the steps:

1. Identify the ID of the component on the page. To demonstrate this, I have created a dummy detail page based on an entity with a State Flow. On this page, I have added two StateMachine Viewer components. We will force only one component to render in React while leaving the other unchanged. Currently, the components appear as follows:
   
   
   
   
2. To force a component to render in React, we need its ID. Go to the Pages section and open the detail page. Then, locate and open the component for which you want to change the rendering framework. Copy the component's ID from the URL and navigate to the Entity Management section.
3. In the Entity Management section, click on the "Internals" tab on the left to access the relevant configuration options. Make sure you enable Edit mode by clicking on the pencil icon. Now, change the Render mode to React and save the changes.
4. Refresh the detail page and observe the result. You will notice the difference between the two components, as shown in the image below:

In order to force a component to render in React, we need the ID of the component. Go to Pages and open the detail page. Then you need to open the component that you want to change the rendition framework. Copy the ID of the component from the URL and open Entity Management. Click on Internals on the left, to open that part of the configuration section. Be sure to hit the Pencil in order to enable Edit mode. Change the Render mode to React and hit Save. Refresh your detail page and look at the result. You will now see the difference between the two components.

Pro tip: Consider using the Content Hub Power Extension, which offers the option to extract the ID and directly open the Entity Management page. This feature saves a significant amount of clicks. Give it a try!

In the image, you can clearly see the different rendering styles. The component above now renders in React, while the other component remains unchanged.

By following these steps, you can selectively leverage the power of React for specific components within your Sitecore page, achieving a mix of enhanced features and a cohesive user experience.

Until next time!