PCF control is empty after use of ReactDOM.render

[Spinix]

Hello,

I am currently building a custom PCF control (control-type="virtual") with a Toast UI Grid:

Everything works fine, but I'm getting stuck on the rendering of a Toast UI Grid column.

As soon as I use "ReactDOM.render", the control freezes with the following error message:

"Warning: Could not replay rendering after an error. This is likely a bug in React. Please file an issue."

Code:

import React = require("react");

import { Toggle } from '@fluentui/react';
import ReactDOM = require("react-dom");

export class optionalRenderer {
    private el: HTMLDivElement;
    toggle: any;

    constructor(props: any) {
        const el = document.createElement('div');
        el.className = 'form-check form-switch checkbox';

        this.el = el;

        this.render();
    }


    getElement(): HTMLDivElement {
        return this.el;
    }

    render(): void {
      console.log('error hiero');
      const element = (
        <button
         
          className="btn_ontable_edit"
        >
          edit
        </button>
      );
  
      ReactDOM.render(element, this.el);
    }
}

In the PCF control sandbox, it works fine! So, I think it has something to do with the way Dynamics CE renders the PCF control.

Does anyone know the cause of this? I've been trying for a day but I'm stuck.

[cchannon]

I think it is because your control is virtual. When the virtual PCF is loaded, it does so at a higher level, and so as you've probably noticed the updateView function is expected to actually return a react element instead of directly inserting it into the DOM.

I would just replace ReactDOM.render with React.createElement and return that component all the way back up the tree through your updateView, then let Dataverse figure out how to add it to the DOM

[Spinix]

thanks for your reply!

I already had a small suspicion that this might be the cause. Unfortunately, I'm not very familiar with TypeScript (and PCF controls) yet but everyday i'm learning new things :).

"I would just replace ReactDOM.render with React.createElement and return that component all the way back up the tree through your updateView, then let Dataverse figure out how to add it to the DOM"

I have to figure out how to do this with a ToastUI Grid renderer. Does anyone has some good advice how to achieve this?

[cchannon · Accepted solution]

I don't know about Toast specifically, but I can lay out for you generally how I would use React Component X in a PCF...

Starting with the index... I would focus on updateView where I would build a props object with whatever input data I need to pass to my control, then I would simply return it from a React.createElement referencing an import from a tsx in my project...

    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        const props: IMyProps = {
            myprop: "myval"
         };
        return React.createElement(
            myComponent, props
        );
    }

Then, in that tsx, I would import my external components and declare my props:

import * as React from "react";
import { myExternalComponent } from "someotherlibrary"

export interface IMyProps{
    myprop: string;
}

Then export my own React component as a functional component that leverages that outside library:

export const myComponent: React.FC<IMyProps> = (props:IMyProps) => {
    return(
        <div>        
            <myExternalComponent someprop={"some input"}/>
        </div>
    )
}

Remember, in your specific case because this is a Virtual component, it is the return that matters: it's how you're sending this component back up to UpdateView, then back to Dataverse so the platform can add it to DOM instead of you doing it yourself.

Give this pattern a try using some basic "Hello World" HTML or something. I'm sure you'll quickly see how it works and it should be straightforward from there to see how you'd insert that Toast component.

Best of luck!

[cchannon]

@Spinix did this help resolve your issue? If so, please mark the Solution so future visitors to the post can see the correct resolution.

[Spinix]

Thank you! I will try and let you guys know if i succeed. 

[Spinix]

I'm not sure how to proceed further. I now understand how Dynamics processes the "DOM", but I can't find a solution for my React element in the Toast UI Grid renderer. It works fine in the Sandbox, but when I test it within Dynamics, I run into issues. Does anyone have any tips for me on how to get a Toast UI Grid renderer to work with ReactDOM.render? I can't return this "ToastUI Grid Renderer" to the UpdateView as Toast UI Grid handles it.

[Spinix]

I've solved the problem by switching back to a standard control. I want to thank all of you for you're help!