Context API error -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

Consider the following code:

My Context.js is:


export const ListContext = createContext();

export const ListContextProvider = (props) => {
  const initialValues = {
    account: "",
    name: "",
    email: "",
  };

  const [values, setValues] = useState(initialValues);

  const ListContext = {
    initialValues,
    values,
    setValues,
  };

  return (
    <ListContext.Provider value={ListContext}>
      {props.children}
    </ListContext.Provider>
  );
};

And wrapped it in App.js like this:

import Homepage from './components/Homepage';
...
import { ListContextProvider } from './components/Context';


function App() {
  const [currentAccount, setCurrentAccount] = useState("");
  return (
    <ListContextProvider>
    <div className="App">
      <Navbar currentAccount={currentAccount} setCurrentAccount={setCurrentAccount}/>
      <Routes>
        <Route path="/" element={<Landingpage />} />
        <Route path="sell" element={ <Sellingform currentAccount={currentAccount}/> } />
        <Route path="storage" element={<WebStorage/>} />
      </Routes>
    </div>  
    </ListContextProvider>
  );
}

export default App;

The page doesn't load anything and console.log throws the following warning:

Warning: 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.

thecalendar · Accepted Answer · 2022-08-04 06:06:19Z

1

My bad. I had declared ListContext twice. Instead of

const ListContext = {
  initialValues,
  values,
  setValues,
};
    
return (
 <ListContext.Provider value={ListContext}>
    {props.children}
 </ListContext.Provider>
)

Changed it to the following and it worked.

const listContext = {
  initialValues,
  values,
  setValues,
};
    
return (
 <ListContext.Provider value={listContext}>
    {props.children}
 </ListContext.Provider>
)

answered Aug 4, 2022 at 6:06

thecalendar

797 bronze badges

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

Collectives™ on Stack Overflow

Context API error -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related