0

Here is my app.js file:

import React from 'react'
import navAritro from './components/navAritro';

function App() {
  return (
      <navAritro></navAritro>
  )
}

export default App;

My index.js Code is here:

import { MuiThemeProvider } from '@material-ui/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

;

And here is my custom component navAritro.js:

import React from 'react'
import { AppBar,IconButton, Toolbar} from "@material-ui/core";
import MenuIcon from '@material-ui/icons/Menu'

function navAritro() {
    return (
    <AppBar position="static">
        <Toolbar>
            <IconButton>
                <MenuIcon />
            </IconButton>
        </Toolbar>
    </AppBar>
    )
};

export default navAritro;

Now the issue is that my navAritro.js component is not showing. I am very new to this technology. Where I am going wrong?

Aritro Rakshit
  • 21
  • 6
  • 5
    React components *have to* start with a capital letter. That's how they are recognised as react components and not native HTML elements – Jayce444 May 20 '21 at 06:09

1 Answers1

3

Try this in your App.js

import React from 'react'
import NavAritro from './components/navAritro';

function App() {
  return (
      <NavAritro></NavAritro>
  )
}

export default App;
Priyanka Panjabi
  • 403
  • 5
  • 12