0

Estoy Usando el componente como una etiqueta , pero me da un error , y ya importa el archivo Ese es el ERROR

Y Este el codigo del Navbar

import React ,{useState} from "react";

const navbar = () =>
{
    return(
        <div>
            <nav className="navbar navbar-light bg-light">
          <div className="container-fluid">
            <a className="navbar-brand">Navbar</a>
            <form className="d-flex">
                <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
                <button className="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </nav>
        </div>
        
        );
   

}
export default navbar;
1
  • Intenta cambiar el nombre del componente a Navbar con la primera letra en Mayúscula Enlace relacionado
    – g.4
    Commented el 18 dic. 2021 a las 19:27

1 respuesta 1

1

Los componentes no pueden estar en minúsculas, el archivo se debería llamar Navbar.js o .jsx, después dentro del componente tanto el nombre de la función como el export deben estar en mayúscula la primer letra, por último en app haces el import Navbar from "./my_components/Navbar" y finalmente dentro de app llamas al componente .

Entonces:

Nombre de archivo con primer letra en mayúscula, ej:

Navbar.jsx

Este archivo contendrá algo como:

import React from 'react' //Esto ya no es necesario, pero no molesta.

  function Navbar() {
    return (
      <div>
        {// tu contenido}
      </div>
    )
  }
  
  export default Navbar

Y luego en app.

import Navbar from "./my_components/Navbar";

Y dentro de app invocamos a Navbar de la siguiente manera:

<Navbar />

Los componentes se capitalizan, es decir llevan su primer letra mayúscula para que no se confundan con etiquetas HTML.

Espero te sirva, quedo a las órdenes.

1
  • Te sugiero leer el apartado "Como preguntar" te ayudará a que sea más claro para la gente y evitar que te cierren la pregunta, siempre pasa código pegado, no imágenes, nos permite copiarlo y hacer pruebas,, la mayor cantidad de información posible para poder ayudarte por el camino correcto. Espero lo que te pasé sirva para resolver tu problema. Commented el 18 dic. 2021 a las 20:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.