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

#1

i have a text.tsx

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

  render() {
     const { name } = this.state;
    return (
        <div>
            It is {name}
        </div>
    );
  }
}
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 {
  constructor(
          ) {
          super();
          this.id = TEST_WIDGET_ID;
          this.title.label = 'Test';
          this.title.caption = 'Test';
          this.title.closable = true;
          this.title.iconClass = 'fa test-tab-icon';
          this.addClass('container');
        }

        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]

#2

[adambattenburg]

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:

@postConstruct()
  protected init(): void {
    this.update()
}

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

return (
    <React.Fragment>
       <Test />
    </React.Fragment>
)
#3

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

#4

[Nitika Sharma]

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