# Target container is not a DOM element (Learning React ch 15) **URL:** \ **Category:** web dev\ **Created:** [February 7, 2020, 9:52pm UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767 "2020-02-07T21:52:08Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![KillerDiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/killerdiller/32/11020_2.png) [@KillerDiller](https://forum.kirupa.com/u/KillerDiller)\ **Post date:** [February 7, 2020, 9:52pm UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/1 "2020-02-07T21:52:09Z")
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: ```auto Todo List
``` index.js: ```auto import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import TodoList from './TodoList'; var destination = document.querySelector("#container"); ReactDOM.render(
, destination ); ``` TodoList.js ```auto import React, { Component } from "react"; class TodoList extends Component{ render(){ return (
); } } export default TodoList; ``` And then the error I’m getting: ![Screenshot from 2020-02-07 16-46-17](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/8aedd7008a47ea0670910431b8b45d918471a642.png) I did some searching and the only useful thing I found was that the thing in the render (\) 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 [kirupa/reactjs/todolist at master · kirupa/kirupa · GitHub](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. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 9, 2020, 3:34am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/2 "2020-02-09T03:34:46Z")
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 🙂 (Also, welcome to the forums! 🍰) Cheers, Kirupa ---
**Author:** ![KillerDiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/killerdiller/32/11020_2.png) [@KillerDiller](https://forum.kirupa.com/u/KillerDiller)\ **Post date:** [February 17, 2020, 5:38am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/3 "2020-02-17T05:38:56Z")
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. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 17, 2020, 4:52pm UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/4 "2020-02-17T16:52:02Z")
It must be something really subtle! I don’t know either. Can you share your full code? ---
**Author:** ![KillerDiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/killerdiller/32/11020_2.png) [@KillerDiller](https://forum.kirupa.com/u/KillerDiller)\ **Post date:** [February 20, 2020, 3:50am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/5 "2020-02-20T03:50:10Z")
That was all the code, but the link to the github repo is [here](https://github.com/dylan-cancelliere/learning-react-book/tree/master/todolist). 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. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 20, 2020, 5:36am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/6 "2020-02-20T05:36:55Z")
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( , document.querySelector("#container") ); ``` When you made this change, what error were you still seeing? ---
**Author:** ![KillerDiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/killerdiller/32/11020_2.png) [@KillerDiller](https://forum.kirupa.com/u/KillerDiller)\ **Post date:** [February 20, 2020, 5:53am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/7 "2020-02-20T05:53:42Z")
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! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 20, 2020, 5:58am UTC](https://forum.kirupa.com/t/target-container-is-not-a-dom-element-learning-react-ch-15/641767/8 "2020-02-20T05:58:51Z")
Glad it all worked out 😛 [![](https://media.giphy.com/media/11sBLVxNs7v6WA/source.gif) ](https://media.giphy.com/media/11sBLVxNs7v6WA/source.gif)