How to use a function from another file in Main App function?

Question

I'm new in React.js, i think that question is simple but i can't find a simple solution. I'm trying to use functions instead of classes and i don't know how to use these functions in Main function as a component. Let me explain better:

• I have a main function called "App.js".
• I have another function that i want to use as a component inside of "App.js" called "Menu(file)/index.js;"

Follow the code:

APP.JS

    import React from "react";
    import { DivPrincipal} from "./styles";
    import {Menu} from "../../components/Menu/index"
    import {DivContent} from "../../components/Content-Kanban/styles"

    function App() {
      return (
        <DivPrincipal>
          <Menu>

          </Menu>
          <DivContent>

          </DivContent>
        </DivPrincipal>
      );
    }

    export default App;

AND THE MENU FUNCTION:

    import React from 'react';
    import { DivMenu } from './styles';

    function Menu() {
      return <DivMenu>
          
      </DivMenu>;
    }

    export default Menu;

When I import the Menu function to Main App function, I'm getting this error:

./src/pages/Main/App.js Attempted import error: 'Menu' is not exported from '../../components/Menu/index'.

What I'm doing wrong?

Answer 1

You are exporting your component as export default Menu.

Based on that you should try importing instead of { Menu } as only Menu:

import Menu from "../../components/Menu/index"

Answer 2

This has to do with the difference between export and export default.

If you export default X, you import it as import X from './path'. If you export X, you import it as import { X } from './path'.