I am working on a SharePoint webpart and need to have a collapsible element that I can add a clickable element to. I have a complex class, so for simplicity’s sake, I have created this example webpart that shows the issue. I have tried a number of different things, including things such as creating a component and then setting the triggerSibling property to that, setting it to just a string and adding the content of the const to the triggerSibling property directly. Here is my class.
import * as React from 'react';
import { IHelloWorldProps } from './IHelloWorldProps';
import Collapsible from 'react-collapsible';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
const siblingContent = <div><a href="https://www.google.com" target="_blank">Clickable sibling content</a></div>;
return (
<Collapsible trigger="Collapsible example" triggerSibling={siblingContent}>
<p>Some collapsible content</p>
</Collapsible>
);
}
}
I get the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Am I doing something wrong? Or is there a better route I should consider for what I need to do?