React error - Element type is invalid: expected a string (for built-in components) or a class/function

Question

I am new to react and don't understand this error I am getting:

Error image

Here's the render method for my menu:

render() {
        return (
            <div>
                <Navbar color="faded" light expand="md">
                    <NavbarBrand href="/">Nomad Press</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                            <NavItem>
                                <NavLink tag={Link} to="/Home">Home</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                            </NavItem>
                            <UncontrolledDropdown nav inNavbar>
                                <DropdownToggle nav caret>
                                    Options
                                </DropdownToggle>
                                <DropdownMenu >
                                    <DropdownItem>
                                        Option 1
                                    </DropdownItem>
                                    <DropdownItem>
                                        Option 2
                                    </DropdownItem>
                                    <DropdownItem divider />
                                    <DropdownItem>
                                        Reset
                                    </DropdownItem>
                                </DropdownMenu>
                            </UncontrolledDropdown>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }

I double checked my imports and made sure the packages were installed. I don't see anything wrong with my render method.

EDIT

Here's what my imports are for menu:

import React from 'react';
import { Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem } from 'bootstrap';
import { Link } from 'react-router-dom';

I get the following error when I remove the brackets around Link.

Dennie de Lange · Accepted Answer · 2018-02-09 22:33:06Z

3

There's nothing wrong with your render method, but probably with your imports. Usually named imports vs defaults imports causes this issue, so

import Navbar from 'somelibrary';

vs

import {Navbar} from 'somelibrary';

So you need to know how the library you're using has exported it's components.

answered Feb 9, 2018 at 22:33

Dennie de Lange

2,9542 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React error - Element type is invalid: expected a string (for built-in components) or a class/function

EDIT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related