CODEWITHSUNDEEP
javascripthtmlreactjs
Gajraj Singh Chouhan
Gajraj Singh Chouhan

Reputation: 440

Components not working in Gatsby (showing as html tag)

So I wanted to add a navbar to a site I am building in Gatsby. I thought instead of having everything in index.js, I could split the html into different components. After doing that, I import that component into index.js but it doesn't work!

Here's an example:

import * as React from "react";

const navibar = () => (
    <nav id="site-nav" className="navbar navbar-fixed-top navbar-custom">
        <div className="container">
            <div className="navbar-header">
                <button
                    type="button"
                    className="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#navbar-items"
                    aria-expanded="false"
                >
                    <span className="sr-only">Toggle navigation</span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                </button>
            </div>
            // more code....
    </nav>
);

export default navibar;

Then I import it,

//components
import { navibar } from "../components/navibar/navibar";

and use it as

export default IndexPage => () = {
     return (
         // some code...
         <navibar />
         // some more code...
     )
}

Now the navbar doesn't actually shows up when I use gatsby develop, I checked the html using Chrome Devtools it looks like

<navibar></navibar>

Is this the wrong way to make up a component ? I am new to React & Gatsby.

Upvotes: 1

Views: 278

Answers (2)

Gulam Hussain
Gulam Hussain

Reputation: 1763

You are exporting navibar as default component. so you need to change your import statement like this-

import Navibar from "../components/navibar/navibar";

Keep in mind that your react component name must be capitalized.

for eg.

export default IndexPage => () = {
     return (
         // some code...
         <Navibar />
         // some more code...
     )
}

Upvotes: 1

garateca
garateca

Reputation: 51

I think what's happening is that your component is named in lower case, try naming it and calling Navibar instead. https://reactjs.org/docs/components-and-props.html#rendering-a-component

Upvotes: 1

Related Questions