React Dom is undefined

Question

I was going though the Meteor tutorial on their website (i am just copy pasting what they are doing) and I encountered an error saying ReactDOM is undefined

This happens to be my code inside App.js (even though I am using Meteor but I doubt the meteor could be the reason for the same)

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
import Task from './task.js';

//WithTracKer is HOC
// App component - represents the whole app
class App extends Component {
  handleSubmit(event) {
    event.preventDefault();
    // Find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }
//  getTasks() {
//    return [
//      { _id: 1, text: 'This is task 1' },
//      { _id: 2, text: 'This is task 2' },
//      { _id: 3, text: 'This is task 3' },
//    ];
//  }

  renderTasks() {
    console.log("here 2")
  //  return this.getTasks().map((task) => (
      return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  handleSubmit(event) {
   event.preventDefault();
   // Find the text field via the React ref
   const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();
   Tasks.insert({
     text,
     createdAt: new Date(), // current time
   });
   // Clear form
   ReactDOM.findDOMNode(this.refs.textInput).value = '';
 }


  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
          <form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
            <input
              type="text"
              ref="textInput"
              placeholder="Type to add new tasks"
            />
          </form>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  return {
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch()
  };
})(App);

Can someone tell me what have I be doing wrong and how can I fix it?

score 1 · Answer 1 · answered Jul 12 '18 at 08:04

1

I think you are missing this :

import ReactDOM from 'react-dom';

answered Jul 12 '18 at 08:04

xSkrappy

747
5
17

score 0 · Answer 2 · answered Jul 12 '18 at 08:05

0

Because you are using ReactDOM. findDOMNode and forgot to import it, import it by using this line:

import ReactDOM from 'react-dom'

If you didn't install it, then check this answer, how to install: Cannot resolve module 'react-dom'

answered Jul 12 '18 at 08:05

Mayank Shukla

100,735
18
158
142

React Dom is undefined

2 Answers2