How to fix Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> in React

// ❌ Function reference - causes error
return <div>{getButton}</div>;
return <div>{MyComponent}</div>;
return <Route path="/about" element={About} />;

// ✅ Proper invocation
return <div>{getButton()}</div>;
return <div><MyComponent /></div>;
return <Route path="/about" element={<About />} />;

function MyComponent() {
  const renderButton = () => {
    return <button>Click me</button>;
  };

  // ❌ Wrong - passes function reference
  return <div>{renderButton}</div>;

  // ✅ Correct - calls function
  return <div>{renderButton()}</div>;
}

// Define component
const Button = () => <button>Click me</button>;

function App() {
  // ❌ Wrong - component reference
  return <div>{Button}</div>;

  // ✅ Correct - component rendered as JSX
  return <div><Button /></div>;
}

import { Routes, Route } from 'react-router-dom';

const About = () => <div>About Page</div>;
const Home = () => <div>Home Page</div>;

function App() {
  return (
    <Routes>
      {/* ❌ Wrong - component reference */}
      <Route path="/" element={Home} />
      <Route path="/about" element={About} />

      {/* ✅ Correct - JSX elements */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

const items = ['Apple', 'Banana', 'Cherry'];

function List() {
  // ❌ Wrong - returns function references
  const badRender = items.map(Item);
  const badConditional = condition ? MyComponent : null;

  // ✅ Correct - returns JSX elements
  const goodRender = items.map((item, i) => (
    <div key={i}>{item}</div>
  ));
  const goodConditional = condition ? <MyComponent /> : null;

  return <ul>{goodRender}</ul>;
}