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

Question

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.

Jonas Wilms · Accepted Answer · 2019-04-22 13:21:00Z

2

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

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

answered Apr 22, 2019 at 13:21

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related