CODEWITHSUNDEEP
javascriptreactjs
A G
A G

Reputation: 11

Issue with React Code "Target container is not a DOM element."

I'm learning react and am getting a particular error.

If I try to get my Login and Register classes into the render function of my index file to output it, I am getting the error:

Target container is not a DOM element.

It works fine if my render just has login OR register, but when I combine them both into the one render function it gives the error, I'm unsure how to fix this.

I've tried removing one or the other to double check that it compiles successfully and it does, but when I add the second class it fails.

The code for my render function in my Index.js file is;

import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import Register from "./Register";


render(

  <Login />, 
  <Register />,
  document.getElementById("root")
);

The ouput code for my Login file is;

render() {
        return (
            <form>
            <pre>{JSON.stringify(this.state)}</pre>
            <button onClick={ event => this.login(event) }>Login</button>
            <pre {...(this.state.message.isEmpty ? "hidden" : "")}>
            {this.state.message}
            </pre>
            </form>

        );
    }
}

export default Login;

and the output code for register is almost identical to logins except and line with 'Login' is 'register'

I need help trying to find out what the problem is so I can fix it. In this way, I can get my html file to display both buttons and not show the error

Target container is not a DOM element

Thank you.

Upvotes: 0

Views: 51

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138277

ReactDOM.render takes one React Node, so you have to wrap your two nodes into another:

 render(
  <>
     <Login />
     <Register />
  </>, 
  document.getElementById("root")
);

Upvotes: 2

Related Questions