I am importing a component in a page of next.js and i am not getting any error but i am not able to see the content of the component and it behaves like the component dosent exists

the homepage / index.js

import Link from "next/link";
import Fragment from "react";
import mainHeroComponent from "../components/heroSection/mainherocomponent";


function HomePage(){
  return (
    <div>
      hello
      <mainHeroComponent />
    </div>
  );

}

export default HomePage;

and mainHeroComponent

import {Fragment} from 'react'



function mainHeroComponent(props) {
  return (
    <Fragment>
      <div className="hero-section">
        <div className="hero-section-text">
          <h1>Hi, I'm ROBO</h1>
        </div>
      </div>
    </Fragment>
  ) 
}

export default mainHeroComponent;

in above code the hello is visible but the content of mainhero is not visible

CodePudding user response：

Your component isn't visible because its name starts with a lowercase letter:

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

It should render once you rename it to MainHeroComponent.