Search code examples
javascriptreactjsruntime-error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. abcd

I have an error when try get function ExpenseItem() from ExpenseItem.js to App.js This is my code

file ExpenseItem.js

function ExpenseItem() {
    return <h2>Expense item!</h2>;
}
export default ExpenseItem();

and this is app.js

import ExpenseItem from "./components/ExpenseItem.js";
function App() {
  return (
    <div> 
      <h2>hello world! </h2>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}
export default App;

I expected have 2 row: "hello world!" and "Expense item" but nothing appear on display

Solution

  • It seems like you are calling the function in the export.

    Change the ExpenseItem-file to this:

    function ExpenseItem() {
    return <h2>Expense item!</h2>;
}
export default ExpenseItem; // Don't call the function here