Nothing rendering with react in my index.js

Question

I have created some static html for my one page app such as a navigation, the header etc. I want to render some content inside the 'content_wrapper' div inside this static html, however I get this console error.

invariant.js:44 Uncaught Error: _registerComponent(...): Target container is not a DOM element.

Here is my index.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, browserHistory} from "react-router";
import "./index.css";

var SideBar = React.createClass({
    render() {
        return (
            <html>
            <head>
                <title>Football Prototype</title>
            </head>
            <div>
                <header class="navbar navbar-fixed-top navbar-shadow">
                    <div class="navbar-branding">
                        <a class="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form class="navbar-form navbar-left navbar-search alt" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search..."
                                   value="Search...">Search</input>
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown menu-merge">
                            <span class="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" class="nano nano-light affix">

                    <div class="sidebar-left-content nano-content">

                        <ul class="nav sidebar-menu">
                            <li class="sidebar-label pt20">Menu</li>
                            <li class="active">
                                <a href="/dashboard">
                                    <span class="glyphicon glyphicon-home"></span>
                                    <span class="sidebar-title">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="/fixtures">
                                    <span class="fa fa-calendar"></span>
                                    <span class="sidebar-title">Fixtures</span>
                                </a>
                            </li>
                        </ul>

                    </div>

                </aside>
                <body>
                    <section id="content_wrapper">

                    </section>
                </body>
            </div>
            </html>
        )
    }
});

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

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

Looks like #content_wrapper is inside your react component. destination needs to be an _existing _ DOM node. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jan 25, 2017 at 9:10
You can't put your entire page into JSX, and then try to render it into that same JSX. There needs to be a pre-existing DOM element for you to mount your component onto with ReactDOM.render. — Joe Clay
– Joe Clay, Commented Jan 25, 2017 at 9:11
Would I create another JS file with a container div or something? Do you have any examples? Thanks — N P
– N P, Commented Jan 25, 2017 at 9:13
You need a static page served by your webserver (index.html) where you load this JS. Basic page structure stuff like head and body need to be in that page. Inside of body you'd have that #content_wrapper node where you ReactDOM.render all your components. Start with the "getting started" tutorial... — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jan 25, 2017 at 9:16

Mayank Shukla · Accepted Answer · 2017-01-25 09:16:27Z

I think you are new to react, you need to create a separate HTML page index.html, like this:

<!DOCTYPE html>
   <html>
      <head>
       <title>Football Prototype</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
      </head>

      <body>
        <div id="content_wrapper"></div>
      </body>
</html>

Inside your component just write the html body part (with all the logic, events and api call) that you want to put in index.html page, Define your component like this:

var SideBar = React.createClass({
    render() {
        return (
            <div>
                <header class="navbar navbar-fixed-top navbar-shadow">
                    <div class="navbar-branding">
                        <a class="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form class="navbar-form navbar-left navbar-search alt" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search..."
                                   value="Search...">Search</input>
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown menu-merge">
                            <span class="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" class="nano nano-light affix">

                    <div class="sidebar-left-content nano-content">

                        <ul class="nav sidebar-menu">
                            <li class="sidebar-label pt20">Menu</li>
                            <li class="active">
                                <a href="/dashboard">
                                    <span class="glyphicon glyphicon-home"></span>
                                    <span class="sidebar-title">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="/fixtures">
                                    <span class="fa fa-calendar"></span>
                                    <span class="sidebar-title">Fixtures</span>
                                </a>
                            </li>
                        </ul>

                    </div>

                </aside>
            </div> 
        )
    }
});

Then Render it by:

//var destination = document.querySelector("#content_wrapper");

ReactDOM.render(
    <div>
        <SideBar/>
    </div>,
    document.querySelector("#content_wrapper");
);

It will work.

How does it know to display my index.html? Do I put that component in script tags inside my index.html page?

Víctor Gutiérrez · Accepted Answer · 2017-01-25 13:44:34Z

You are trying to render your component in a container that does not exist. The container you must specify in ReactDOM.render must exists before you call the function. So you need to have a HTML template. Have in mind that React is component based, so you should make a component for each part of your menu (what I think you are doing here). I recommend you to have the following structure:

HTML

<html>
    <head>
        <!--- links to css or js files here --->
    </head>    
    <body>
        <div id="root">
        </div>
        <!--- You can add here the link to your component/s --->
        <srcipt src=path_to_your_script></script>
    </body>
</html>

Component for menu

var SideBar = React.createClass({
    render() {
        return (
            <html>
            <head>
                <title>Football Prototype</title>
            </head>
            <div>
                <header class="navbar navbar-fixed-top navbar-shadow">
                    <div class="navbar-branding">
                        <a class="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form class="navbar-form navbar-left navbar-search alt" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search..."
                                   value="Search...">Search</input>
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown menu-merge">
                            <span class="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" class="nano nano-light affix">

                    <div class="sidebar-left-content nano-content">

                        <ul class="nav sidebar-menu">
                            <li class="sidebar-label pt20">Menu</li>
                            <li class="active">
                                <a href="/dashboard">
                                    <span class="glyphicon glyphicon-home"></span>
                                    <span class="sidebar-title">Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a href="/fixtures">
                                    <span class="fa fa-calendar"></span>
                                    <span class="sidebar-title">Fixtures</span>
                                </a>
                            </li>
                        </ul>

                    </div>

                </aside>
                <body>
                    <section id="content_wrapper">

                    </section>
                </body>
            </div>
            </html>
        )
    }
});

I've just copied yours because is good enough.

Render the component

ReactDOM.render(
    <div>
        <SideBar/>
    </div>,
    document.querySelector("#root");
);

Just like this, when you open your index.html with the code shown in top, it will load the script of your component and then, render it to "root".

Extra: You should read documentation about render in React in order to don't have memory leaks performance and stuff).

Hope this helps :)

Do I create that as a seperate html file? How do i then link that html file to the component?
Usually, you want to have just index.html as your root html. So, yes, you have to have it in a seperate file. I'll edite my answer to be more specific.

Collectives™ on Stack Overflow

Nothing rendering with react in my index.js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related