Hi I am trying to put some text with react widget but nothing shows up

i have a text.tsx

interface Props{
interface State{
class Test extends React.Component<Props, State> {
  constructor(props: Props) {  
      this.state = {name: 'Joe'} ;

  render() {
     const { name } = this.state;
    return (
            It is {name}
export default Test;

and a test-widget.tsx

import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
import React from 'react';
import Test from '../components/Test';

export class TestWidget extends ReactWidget {
          ) {
          this.id = TEST_WIDGET_ID;
          this.title.label = 'Test';
          this.title.caption = 'Test';
          this.title.closable = true;
          this.title.iconClass = 'fa test-tab-icon';

        protected render(): React.ReactNode {
        return <Test />;

but nothing gets displayed, i don’t get any errors in console or in lint . has anyone tried it before?

[original thread by Nitika Sharma]


I’ve done something similar before. Without seeing the contribution or frontend-module files, it’s difficult to say what the issue is, but a possible problem is that:

  protected init(): void {

needs to be above the render method in order to update. Another issue could be react syntax? Maybe wrap the return in parenthesis?

return (
       <Test />

@nitika if you have your code hosted on github I can most definitely take a closer look at it for you :slight_smile:

[Nitika Sharma]

@abattenburg Thanks! the missing @postConstruct() worked for me