CODEWITHSUNDEEP
javascripthtmlreactjs
N P
N P

Reputation: 2619

Nothing rendering with react in my index.js

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
);

Upvotes: 0

Views: 1646

Answers (2)

V&#237;ctor Guti&#233;rrez
V&#237;ctor Guti&#233;rrez

Reputation: 91

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 :)

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104379

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.

Upvotes: 3

Related Questions