I'm trying to import a simple ponent into my React. I'm having trouble locating this ponent.

I'm getting the following error while importing ponent

./src/App.js 61:28-32 './ponentes/Menu' does not contain an export named 'Menu'.

This is my simple ponent:

import React, { Component } from 'react';

import { Button } from 'react-bootstrap';

export default class Menu extends Component {

    render() {
        return (
            <div>
            <Button bsStyle="danger">Hello World Dangerhahahah</Button>
          </div>
        );
    }

}

I'm calling it as follows in my App.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { Menu } from './ponentes/Menu';

import { Button } from 'react-bootstrap';

class App extends Component {

  constructor(props) {
    super(props)
  }

render() {
    return (
      <div>
        <Menu />
        <Button bsStyle="danger">Take this action</Button>
        <div className="App">

          <div className="bs-header" id="content">
            <div className="container">
              <h1>Template Changelog</h1>
              <p>Lists all changes to the HTML template files</p>
            </div>
          </div>
        </div>
 );
  }
}

export default App;

I'm trying to import a simple ponent into my React. I'm having trouble locating this ponent.

I'm getting the following error while importing ponent

./src/App.js 61:28-32 './ponentes/Menu' does not contain an export named 'Menu'.

This is my simple ponent:

import React, { Component } from 'react';

import { Button } from 'react-bootstrap';

export default class Menu extends Component {

    render() {
        return (
            <div>
            <Button bsStyle="danger">Hello World Dangerhahahah</Button>
          </div>
        );
    }

}

I'm calling it as follows in my App.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { Menu } from './ponentes/Menu';

import { Button } from 'react-bootstrap';

class App extends Component {

  constructor(props) {
    super(props)
  }

render() {
    return (
      <div>
        <Menu />
        <Button bsStyle="danger">Take this action</Button>
        <div className="App">

          <div className="bs-header" id="content">
            <div className="container">
              <h1>Template Changelog</h1>
              <p>Lists all changes to the HTML template files</p>
            </div>
          </div>
        </div>
 );
  }
}

export default App;

• javascript
• reactjs

3 Answers 3

It's because you're trying to destructure the exported default ponent from the file.

Just remove the brackets around the Menu from the import statement in the App ponent so import { Menu } from './ponentes/Menu'; bees import Menu from './ponentes/Menu';

In your Menu.js you are using export default which creates a export entry named default regardless what is the name of class

You should either:

1. Use import Menu from './ponents/Menu'; in App.js
2. Use export class Menu extends Component in Menu.js

try changing import { Menu } from './ponentes/Menu'; to import Menu from './ponentes/Menu';