How to fix Error: You may have accidentally passed an object where a React component was expected in React

// DON'T DO THIS
const MyComponent = {
  render: function() {
    return <div>Hello</div>;
  }
};

// DO THIS
const MyComponent = () => {
  return <div>Hello</div>;
};

// Or this
function MyComponent() {
  return <div>Hello</div>;
}

// Or this
class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

// MyComponent.js
export default function MyComponent() {
  return <div>Hello</div>;
}

// App.js - correct import
import MyComponent from './MyComponent';

// MyComponent.js
export function MyComponent() {
  return <div>Hello</div>;
}

// App.js - correct import (note the curly braces)
import { MyComponent } from './MyComponent';

// MyComponent.js
export default function MyComponent() { /* ... */ }

// App.js - WRONG! This imports the module object
import { MyComponent } from './MyComponent'; // undefined!

// App.js - CORRECT
import MyComponent from './MyComponent';

import MyComponent from './MyComponent';

console.log('MyComponent is:', MyComponent);
console.log('Type:', typeof MyComponent);

// If it logs an object instead of a function, you have an import/export mismatch

import * as MyComponent from './MyComponent'; // This imports the module object!
<MyComponent /> // Error: object is not a component

import MyComponent from './MyComponent'; // Default import
// OR
import { MyComponent } from './MyComponent'; // Named import
<MyComponent />

import * as MyModule from './MyComponent';
<MyModule.default /> // If it's a default export
// OR
<MyModule.MyComponent /> // If it's a named export

import { connect } from 'react-redux';

const MyComponent = () => <div>Hello</div>;

// WRONG - connect returns a function, not a component
export default connect;

import { connect } from 'react-redux';

const MyComponent = () => <div>Hello</div>;

// CORRECT - call the HOC with your component
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// ComponentA.js
import ComponentB from './ComponentB';
export default function ComponentA() {
  return <ComponentB />;
}

// ComponentB.js
import ComponentA from './ComponentA'; // Circular!
export default function ComponentB() {
  return <ComponentA />;
}

import { lazy, Suspense } from 'react';

const ComponentA = lazy(() => import('./ComponentA'));

export default function ComponentB() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ComponentA />
    </Suspense>
  );
}