CODEWITHSUNDEEP
javascriptreactjs
G3Ballin
G3Ballin

Reputation: 5

Troubles With React (Barely Starting to Learn It)

So I was trying to start a list up in Scrimba with this code below: 

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
  <ul>
    <li>Goanar</li>
    <li>Lam-Ruthadel</li>
    <li>Rambang</li>
 </ul>,
)
document.getElementbyId("root")

But it is showing "Invariant Violation: Target container is not a DOM element. (/node_modules/fbjs/lib/invariant.js:42)"

What am I doing wrong? Is it how I wrote my code maybe? I've been stuck

Upvotes: 0

Views: 42

Answers (2)

Brandon Bailey
Brandon Bailey

Reputation: 811

ReactDom.render is a method that takes two arguments and an optional callback, see the React docs for this method here: ReactDom.render

So, in this scenario, if the method looks like this:

ReactDOM.render(element, container[, callback])

element will be your <ul>...</ul> and container is the documents "root" element: document.getElementbyId("root")

All together, it should look something like:

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
  <ul>
    <li>Goanar</li>
    <li>Lam-Ruthadel</li>
    <li>Rambang</li>
 </ul>,
 document.getElementbyId("root")
)

You should have a successful mount and render now. Hope this helps

Upvotes: 0

BenMorel
BenMorel

Reputation: 36524

You've most likely misplaced the closing parenthese:

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
  <ul>
    <li>Goanar</li>
    <li>Lam-Ruthadel</li>
    <li>Rambang</li>
 </ul>,
 document.getElementbyId("root")
)

The target element is the second argument to ReactDom.render().

Upvotes: 2

Related Questions