girlrockingguna girlrockingguna - 7 months ago 58
Javascript Question

Component not rendering with ReactJS and React Router?

Building a web app using Meteor and React, and I'm trying to render two views within React, and the index component won't render... unsure why. The 'Two' component does. Here is my routes.jsx:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import { Index } from '../../ui/components/index.jsx';
import { Two } from '../../ui/pages/two.jsx';

Meteor.startup( () => {
render(
<Router history={ browserHistory }>
<Route path="/" component={ Index } />
<Route path="/two" component={ Two } />
</Router>,
document.getElementById( 'react-root' )
);
});


Index.jsx:

import React, { Component } from 'react';

export default class Index extends Component {
render() {
return(
<Index className="container">
<header>
<h1>Todo List</h1>
</header>
</Index>
);
}
}


Two.jsx:

import React from 'react';

export const Two = () => <h3>Two</h3>;


What's going on? Any help appreciated!

QoP QoP
Answer

You shouldn't be rendering Index inside Index component.

this

import React, { Component } from 'react';

export default class Index extends Component {
    render() {
        return(
        <Index className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </Index>
        ); 
    }
}

should be

import React, { Component } from 'react';    

export default class Index extends Component {
    render() {
        return(
        <div className="container">
            <header>
                <h1>Todo List</h1>
            </header>
        </div>
        ); 
    }
}