PCF Control giving error when its added in Form on Dynamics 365 Platform

[SumitThakran]

Hi,

I have developed custom PCF Control in Typescript . I have used some React JS code to open React-Modal as popup window in Control Button Click.

This custom PCF Control is running fine when i am running it locally i.e from Visual Studio code. But when i deployed PCF Control to my Dynamics 365 environment.

And tried to access control in CRM Form then getting below error show in screenshot

Basically i have used React js inside my Typescript project. I have used React-Modal component for showing popup window .

i did some analysis and found that when i remove Modal tsx file from my PCF Control and deployed simple component on Dynamics 365 platform then this error is not coming .

Can anyone tell me what i am doing wrong while calling Modal component or in its contructor.

So below is my piece of code i wrote it down to call my Modal component. Basically passing one parameter to Modal Component.

<MyModal inputABN = {this.state.inputValue}/>

And below is constructor of My Modal component.

export class MyModal extends React.Component<ModalProps, any> {
constructor (props: ModalProps) {
super(props);
this.state = {
showModal: false , inputABN: props.inputABN
};
............................

Any Help will be appreciated

Thanks

[Michaelfp]

put the appElement={el} as the div that PCF gives to you on the <Modal> . Because, if you see the React Project we have a default app element(<div>). And things created will be inside it. In the Pcf is a little different because each control has your own. Try this and check if this warning stops.