CODEWITHSUNDEEP
javascriptfacebookreactjs
TheWebs
TheWebs

Reputation: 12923

Possible Spelling mistake that I cannot see? ReactDOM is undefined

So consider the following example:

import React    from 'react';
import ReactDOM from 'react-dom/dist/react-dom';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      current_tab: 'home'
    }
  }

  renderActiveTab() {
    switch (this.state.current_tab) {
      case 'home':
        return (<div>Hello World</div>);
      default:
        return (<div>Hello World</div>);
    }
  }

  render() {
    return (
      <div>
        {this.renderActiveTab()}
      </div>
    )
  }
}

var dashboardElement = document.getElementById("dashboard");
console.log(dashboardElement, ReactDOM, React);

if (dashboardElement !== null) {
    ReactDOM.render(
        <Dashboard source={"//" + location.hostname + "/api/v1/blog/posts"} />,
        dashboardElement
    );
}

module.exports = Dashboard;

Which correlates to:

enter image description here

Who wants to fill me in? ReactDOM seems to be undefined?

I am using:

"react": "15.1.0",
"react-dom": "15.1.0",

How is this undefined?

Upvotes: 0

Views: 57

Answers (1)

Christiaan
Christiaan

Reputation: 848

Change

import ReactDOM from 'react-dom/dist/react-dom'; into

import ReactDOM from 'react-dom';

The react-dom/dist/react-dom.js file is available to directly include from a script tag. See Development vs. Production Builds react documentation.

Upvotes: 1

Related Questions