React.jsx: type is invalid -- expected a string (for built-in components) - Try convert class component to functional component react

Question

I'm getting the following error

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check your code at Navbar.js:8. at NavbarComponent at ThemeContextProvider

I follow a tutorial, he is using a class component to use react-context provider & consumer but I try to convert it to functional component. So, these are my code

ThemeContext.js

import { createContext, useState } from "react";

export const ThemeContext = createContext();

function ThemeContextProvider(props) {
  const [theme, setTheme] = useState({
    isLight: true,
    light: "light",
    dark: "dark",
  });

  const toggleTheme = () => {
    setTheme({ isLight: !theme.isLight });
  };

  return (
    <ThemeContext.Provider value={{ ...theme, toggleTheme: toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
}

export default ThemeContextProvider;

This is where the error come from Navbar.js

import { Link } from "react-router-dom";
import { Navbar, Nav, Container } from "react-bootstrap";
import { ThemeContext } from "../helpers";

function NavbarComponent() {
  return (
    //the error start from this line
    <ThemeContext.Consumer>
      {(themeContext) => {
        const { isLight, light, dark } = themeContext;
        const theme = isLight ? light : dark;
        return (
          <div id={theme}>
            <Navbar bg="dark" variant="dark" expand="lg">
              <Container>
                <Navbar.Brand as={Link} to="/">
                  <h1>Brand</h1>
                </Navbar.Brand>

                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse
                  id="basic-navbar-nav"
                  className="justify-content-end"
                >
                  <Nav className="mr-auto">
                    <Nav.Link as={Link} to="/complain">
                      Complain
                    </Nav.Link>
                    <Nav.Link as={Link} to="/product">
                      Product
                    </Nav.Link>
                    <Nav.Link as={Link} to="/category">
                      Category
                    </Nav.Link>
                    <Nav.Link as={Link} to="/profile/1">
                      Profile
                    </Nav.Link>
                    <Nav.Link>Logout</Nav.Link>
                  </Nav>
                </Navbar.Collapse>
              </Container>
            </Navbar>
          </div>
        );
      }}
    </ThemeContext.Consumer>
  );
}

export default NavbarComponent;

And the code from tutorial is here Navbar.js

import React,{Component}from'react';
import{ThemeContext}from'../helpers';
class Navbar extends Component{
  render(){
    return(
      <ThemeContext.Consumer>{(context)=>{
        const{isLightTheme,light,dark}=context;
        const theme=isLightTheme?light:dark;
        return(
          <nav style={{background:theme.ui,color:theme.syntax}}>
            <h1>Context App</h1>
            <ul>
              <li>Home</li>
              <li>About</li>
              <li>Contact</li>
          </nav>
        )
      }}</ThemeContext.Consumer>
   );
 }
}
export default Navbar;

any help would be appreciated. thank you

It's alot easier for everyone if you tell us what part of `Navbar` generates the error. — super, Jun 11 '22 at 07:50
Where do you use `ThemeContextProvider` ? (The error says `Check your code at ... NavbarComponent at ThemeContextProvider`, but the code that you have posted doesn't use the `ThemeContextProvider`.) — kca, Jun 12 '22 at 09:50

score 1 · Accepted Answer · answered Jun 12 '22 at 19:45

It turns out i do the wrong way to import a ThemeContextProvider. I put an index.js inside helper folder. Here is the code of index.js

import ThemeContextProvider, { ThemeContext } from "./ThemeContext";

export { ThemeContext, ThemeContextProvider };

This problem was solved by referencing this post

React.jsx: type is invalid -- expected a string (for built-in components) - Try convert class component to functional component react

1 Answers1