How to render a React component (ES6 API) directly using ReactDOM?

Question

I'm using the ES6 classes API of React (by using TypeScript) and want to render a subtyped class of type React.Component using ReactDOM.render().

The following code works:

class MyComponentProps {
    someMember: string;
}

class MyComponent extends React.Component<MyComponentProps, {}> {
    constructor(initialProps: MyComponentProps) {
        super(initialProps);
    }
}

let rootNode = document.getElementById('root');
ReactDOM.render(
    <MyComponent someMember="abcdef" />,
    rootNode
)

Now, given the explicit typing of the constructor in react.d.ts, I'd assume I can pass an instance of the MyCustomProps object that populates with initial properties (as done in the above code). But how to render the component then directly without JSX/TSX syntax?

The following does NOT work:

ReactDOM.render(new MyComponent(new MyComponentProps()), rootNode);

I know I could just use the JSX syntax as a workaround, but as my MyCustomProps object is pretty large, I don't want to repeat every member of the MyCustomProps object.

Shouldn't you use React.createElement(MyComponent, new MyComponentProps()) instead of new MyComponent(new MyComponentProps())? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Feb 24, 2016 at 10:54
Indeed, that'll work - I could also tell by looking at the compiled .jsx code which maps the JSX syntax to exactly that syntax. If you post you comment as an answer, I'll mark it as accepted. — Dynalon
– Dynalon, Commented Feb 24, 2016 at 11:42

WitVault · Accepted Answer · 2017-03-28 08:49:24Z

15

You should ues React.createElement. React.createElement takes a tag name or component, a properties object, and variable number of optional child arguments. E.g.

class App extends React.Component {
  render(){
    return (

      <div><h1>Welcome to React</h1></div>
    );
  }
}

Using jsx it can be rendered like this

ReactDOM.render(<App />, document.getElementById('app'));

In another way(without jsx)

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

A running example -

class App extends React.Component {
  render(){
    return (
      <div><h1>Welcome to React</h1></div>
    );
  }
}

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app">
</div>

edited Mar 28, 2017 at 8:49

answered Feb 24, 2016 at 12:05

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dynalon Over a year ago

The last line of code in your answer is what I was looking for, thx!

Nate Glenn Over a year ago

Future Googlers: you should change your code to look like this if you are getting TypeError: this is undefined at react.js:5045.

Minh Nghĩa Over a year ago

So I have to use ReactDOM.render(React.createElement(), root) instead of ReactDOM.render(<div></div>, root)? Is there anything can be done that makes TypeScript allow JSX literal in ReactDOM.render()

Collectives™ on Stack Overflow

How to render a React component (ES6 API) directly using ReactDOM?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related