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

Question

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

Answer 1

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