JIYIK CN >

produces the error " Functions are not valid as a React child. This may happen if you return a Component instead offrom render.There are 2 common reasons:

1. Return a function reference from render instead of a component.
2. Use React Router routing as <Route path="/about" element={About} />instead <Route path="/about" element={<About />} />.

Here is an example that produces the above error

/**
 * ⛔️ Functions are not valid as a React child.
 * This may happen if you return a Component instead of <Component /> from render.
 *  Or maybe you meant to call this function rather than return it.
 */
const App = () => {
  const getButton = () => {
    return <button>Click</button>;
  };

  // 👇️ returning function not JSX element from render
  return <div>{getButton}</div>;
};

export default App;

The problem in your code snippet is that we renderare returning getButtona function from a method, instead of returning an actual JSX element.

To resolve the error in this case, we can call this function.

const App = () => {
  const getButton = () => {
    return <button>Click</button>;
  };

  // ✅ now returning the actual button
  // added parentheses () to call the function
  return <div>{getButton()}</div>;
};

export default App;

By calling getButtonthe function, we return the button element that resolves the error.

If you're trying to render an actual component, make sure to use it <Component />as and not Component.

const App = () => {
  const Button = () => {
    return <button>Click</button>;
  };

  // ✅ Using component as <Button />, not Button
  return (
    <div>
      <Button />
    </div>
  );
};

export default App;

Another common cause of “ Functions are not valid as a React child ” error is when we pass an element to a react router route, <Route path="/about" element={About} />e.g.

// ⛔️ wrong syntax
<Route path="/about" element={About} />

// ✅ right syntax
<Route path="/about" element={<About />} />

In react router v6, instead of childrenpassing the property to Route component, we use element property, <Route path="/about" element={<About />} />e.g.

When using react router , make sure you pass the component that should be rendered for a specific route as instead <Component />of Component.