import react function component to another-CodePudding

Im trying to do some basic importing of a react function component to the main App.js

but for some reason it’s just not importing

can someone help me understand, why it’s not importing my component?

this is the App.js

import React from 'react';
import './App.css';
import mainGrid from './components/mainGrid';


function App() {
  return (
    <mainGrid/>
  );
}

export default App;

and this is the mainGrid.js

import React from "react";
import "./mainGrid.css";

 function mainGrid() {
    return (
      <div className="mainGrid">
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
    );
  }
  
  export default mainGrid;

CodePudding user response：

You should capitalize the react element name.

As per react docs:

Capitalized types indicate that the JSX tag is referring to a React component.

import React from 'react';
import './App.css';
import MainGrid from './components/mainGrid';


function App() {
  return (
    <MainGrid />
  );
}

export default App;