When building Pluggable Widget why can TextInput not be used as a JSX component?

0
I’m following this tutorial by Mendix. It’s pretty cool learning to build a widget. I’m able to use the widget in the modeler and it looks correct (except for the big red X lol).    But I can’t type any text in it. I can type in the Mendix text-box but not mine. I suspect it’s because of this error:         'TextInput' cannot be used as a JSX component. Its instance type 'TextInput' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("c:/Users/lhannine/Mendix/WidgetsSandbox/CustomWidgets/textBox/node_modules/mendix/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.   TextInput is established here: import { CSSProperties, Component, ReactNode, createElement } from "react"; import classNames from "classnames";   export interface InputProps {     value: string;     className?: string;     index?: number;     style?: CSSProperties;     tabIndex?: number; }   export class TextInput extends Component<InputProps> {     render(): ReactNode {         const className = classNames("form-control", this.props.className);         return (<input             type="text"             className={className}             style={this.props.style}             value={this.props.value}             tabIndex={this.props.tabIndex}         />);     } }   See the linked tutorial for prettier code snippets. How to I make TextInput comply as a valid JSX component?
asked
1 answers
2

I had to update the components>widgetname.tsx file to:

 

import { Component, createElement } from "react";

 

export interface InputProps {

    value: string;

}

 

export class TextInput extends Component<InputProps> {

    render() {

        return <input type="text" value={this.props.value} />;

    }

}

answered