0

I'm new to Js and React, trying to make my way into this framework.

My problem is in this component, it is saying it returns nothing or return statement is missing, but i have declared my return statement as shown bellow.


const navbar = () => {
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="container-fluid">
                <a className="navbar-brand" href="#">Navbar</a>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div className="navbar-nav">
                        <a className="nav-link active" aria-current="page" href="#">Home</a>
                        <a className="nav-link" href="#">Features</a>
                        <a className="nav-link" href="#">Pricing</a>
                        <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </div>
                </div>
            </div>
        </nav>
    )
}

export default navbar
Gabriel Botareli
  • 1
  • 3
    Firstly, **always** start component names with a capital letter. Also, how are you trying to import/use it. – Jayce444 Jun 04 '21 at 01:19
  • I'm importing it like this: import Navbar from "../components/Navbar" it is importing, and if i paste my html code directily it renders. The problem started when i tryied to made it a component. – Gabriel Botareli Jun 04 '21 at 01:22
  • Rename navbar to Navbar (or better yet NavBar). https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters – Kevin C. Ferron Jun 04 '21 at 01:26
  • @KevinC.Ferron i've looked into that question, tryied Navbar and NavBar, but it still doesn't render and say it's returning void. – Gabriel Botareli Jun 04 '21 at 01:31
  • I did it on https://snack.expo.io/iQxTzdkyd using your code and after renaming it displays. @GabrielBotareli – Kevin C. Ferron Jun 04 '21 at 01:33
  • @GabrielBotareli i can't see any reason it wouldn't work. Can you make a sandbox recreating it? – Jayce444 Jun 04 '21 at 01:58
  • I'm using it inside a Fragment, it may be the problem ? import React, { Fragment } from "react" import NavBar from "../components/Nav" const Layout = ({ children }) => { return ( { children } ) } – Gabriel Botareli Jun 04 '21 at 02:03
  • After some time redoing my steps and looking into my files I've notice 2 Nav.js 1 in my containers and 1 in my components. I was eddint my Nav.js on containers but importing from components. That was my problem, after that I've edited the right file and used as mentioned by Kevin and Jayce, NavBar and it renders. rookie mistake... – Gabriel Botareli Jun 04 '21 at 02:49

1 Answers1

0

After some time redoing my steps and looking into my files I've notice 2 Nav.js 1 in my containers and 1 in my components.

I was eddint my Nav.js on containers but importing from components. That was my problem, after that I've edited the right file and used as mentioned by Kevin and Jayce, NavBar and it renders.

rookie mistake...

Gabriel Botareli
  • 1