Target container is not a DOM element (Learning React ch 15)

I’ve been following along with the Learning React (2nd Edition) book for a few weeks now, and I’ve encountered an error at chapter 15 where I’m building a todo list.

The relevant code is:


<!doctype html>
<html lang="en">
    <title>Todo List</title>
<div id="#container">



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './TodoList';

var destination = document.querySelector("#container");



import React, { Component } from "react";

class TodoList extends Component{
        return (
            <div className="todoListMain">
                <div className="header">
                        <input placeholder="enter task">
                        <button type="submit">add</button>

export default TodoList;

And then the error I’m getting:

Screenshot from 2020-02-07 16-46-17

I did some searching and the only useful thing I found was that the thing in the render (<TodoList/>) might not be a valid component, but since it is properly extending Component I don’t have any reason to believe that’s the case.

I’ve been stumped on this for a couple days, so I’d appreciate any help!

Edit: I just tried the using the code from and I’m getting the same error, so it looks like something is wrong with the book’s implementation.

The error might be in your container element definition in HTML and reference in JS. You should have the id value just be container (not #container). In your JS, you should reference it as follows:

var destination = document.querySelector("#container");

That might be the culprit, for destination wasn’t resolving to a DOM element since container couldn’t be found. Let me know if that does it :slight_smile:

(Also, welcome to the forums! :cake:)


Sorry for taking so long to reply. I changed that line, but no dice. I’ve been learning a bunch more React since making this post, but this bug still eludes me.

It must be something really subtle! I don’t know either. Can you share your full code?

That was all the code, but the link to the github repo is here. I use Webstorm for my IDE and maybe there’s an issue there, but I always use npm start in the terminal to actually run the page, so I’m not sure why it would impact anything.

I just cloned your repo, and making the change I mentioned earlier about using #container fixed your app for me:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import TodoList from "./TodoList";


When you made this change, what error were you still seeing?

That worked! I guess I confused myself somewhere along the line because I’m pretty sure I initially had the “#” in the line since that’s what I copied over when I started the thread. I guess I must have deleted it at some point. Anyways, thanks for the help!

1 Like

Glad it all worked out :stuck_out_tongue: