I'm trying to set an icon for a button in react, but it's getting me this error. The setIcon of the Button functionality and the button is like this from the source code:
class Button {
node: HTMLButtonElement
icon: SVGElement
constructor() {
this.node = document.createElement('button');
this.node.type = 'button';
this.icon = null;
}
setIcon(icon: SVGElement) {
this.icon = icon;
this.node.appendChild(icon);
}
The button is from a librabry that written in TypeScript as mapbox control button.
The icon I am using is from MUI,
import AdjustIcon from '@mui/icons-material/Adjust'
What I did is this.back.setIcon(AdjustIcon); And this.back.setIcon(<AdjustIcon/>); Both are not working and give the same error message：
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
The issue has been fixed, <AdjustIcon/> is a react element but not a DOM node.
However .appendchild() is expecting a DOM node as parameter, and that caused the error.
The solution of this is convert <AdjustIcon/> to a DOM node, and I was using ReactDOM.render() to do that.
const container = document.createElement('icon');
ReactDOM.render(<AdjustIcon />, container);
this.back.setIcon(container);
Using document.createElement() to create a container, and call ReactDOM.render() to render the icon into that container. Then just simply use that container as the icon node.