Ad

ReactJS - Importing Component Doesnt Show Up In DOM

- 1 answer

Im having a problem displaying the component I'm importing into my home.jsx file. No errors are being outputted.

My component file(header.jsx):

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './header.scss';

//Export Modules.
export default

class Navigation extends Component {
    render(){
        return (
            <header>
                <li><a target="_blank" rel="nofollow noreferrer" href="/">Home</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="/about">About</a></li>
                <li><a target="_blank" rel="nofollow noreferrer" href="/contact">Contact</a></li>
            </header>
        );
    }
}

My main file(home.jsx):

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './home.scss';

//Import Components.
import { Navigation } from '../../components/header.jsx'

//Export Modules.
export default

class HelloMessage extends Component {
    render(){
        return (
            <div>
                <p className="hello">Hello World!</p>
            </div>
        );
    }
}

I'm rendering to the DOM like so(home.js):

import React from 'react';
import ReactDOM from 'react-dom';
import HelloMessage from './home.jsx';


ReactDOM.render(<HelloMessage />, document.getElementById('root'));

HTML:

<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    <div id='root'></div>
    <script src="bundle.js"></script>
  </body>
</html>

I know the paths are correct. I added a console.log into the component file and received it via development tools in chrome. Is it because I'm not directly binding it to a DOM element? I figured since my main file is being bound to an element it would to the same for my component? I guess I'm not sure how to bind it correctly? Sorry for the confusion, I'm new to React.js

Ad

Answer

Based on the comments, I think you're saying that your HelloMessage component is displaying, but your Navigation component is not displaying, so I'll answer that bit.

When you do this:

ReactDOM.render(<HelloMessage />, document.getElementById('root'));

...you're just telling React to bind whatever the HelloMessage component returns from its render method to that DOM element. Even though you are importing your Navigation component, you are not actually rendering it so React doesn't really know it existsg React to bind whatever the HelloMessage component returns from its render method to that DOM element. Even though you are importing your Navigation component, you are not actually rendering it so React doesn't really know it exists. In order to render your Navigation component you'd need to do this in home.jsx:

// Import Dependencies.
import React, { Component } from 'react';

// Import Styles.
import styles from './home.scss';

// Import Components.
import { Navigation } from '../../components/header.jsx'

// Export Modules.
export default

// Note that now `Navigation` is included in the render output
class HelloMessage extends Component {
    render(){
        return (
            <div>
                <Navigation />
                <p className="hello">Hello World!</p>
            </div>
        );
    }
}
Ad
source: stackoverflow.com
Ad