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

programming web dev
1

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:

index.html:

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

</div>
</body>
</html>

index.js:

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

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

ReactDOM.render(
    <div>
        <TodoList/>
    </div>,
    destination
);

TodoList.js

import React, { Component } from "react";

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

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 https://github.com/kirupa/kirupa/blob/master/reactjs/todolist/ and I’m getting the same error, so it looks like something is wrong with the book’s implementation.

2

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:)

Cheers,
Kirupa

3

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.

4

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

5

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.

6

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";

ReactDOM.render(
    <TodoList/>,
    document.querySelector("#container")
);

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

7

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
8

Glad it all worked out :stuck_out_tongue: