Hi,
I am seeing this same error, and I'm using a functional component.
I've de-duped my node_modules folder and followed all the other steps in the various forum posts.
I've traced this error into template.js in the ej2-base package. It appears the function expects a string, but the examples (and my code) are passing a function that returns a ReactElement. I've confirmed that if I rewrite the functions to return strings it works as expected.
So, my question is this — given all the examples are in React class components, what is the level of support for functional components?
Here's my example below of a functional component. If I rewrite the sidebarProvider and contentProvider functions to return HTML strings, it works, but of course I need ReactElements.
Any tips?
const MyComponent = (): ReactElement => {
const sidebarProvider = (): ReactElement => (<div className="splitter-content">I am a sidebar</div>);
const contentProvider = (): ReactElement => (<div className="splitter-content">I am a sidebar</div>);
return (
<SplitterComponent
id="splitter"
height="100%"
width="100%"
>
<PanesDirective>
<PaneDirective
size="400"
min="0"
content={sidebarProvider}
/>
<PaneDirective
size="400"
min="0"
content={contentProvider}
/>
</PanesDirective>
</SplitterComponent>
);
}
