Props of path "/" is not rendering on site?

Question

Output:

[HMR] Waiting for update signal from WDS...

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

App.js Code:

import Header from "./MyComponents/Header";
import { Todos } from "./MyComponents/Todos";
import { Footer } from "./MyComponents/Footer";
import { AddToDo } from "./MyComponents/AddTodo";
import { About } from "./MyComponents/About";
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

<Router>
  <Header title="My Todos List" searchBar={false} />
  <Routes>
    <Route
      path ="/"
      element={() => {
        return (
          <>
            <AddToDo addTodo={addTodo} />
            <Todos todos={todos} onDelete={onDelete} />
          </>
        )
      }}
    />
    <Route path="/about"
      element ={<About />}
    />
  </Routes>
  <Footer />
</Router>

Are you using ReactDOM.render() to actually render the application? — sbolel, Dec 03 '21 at 19:15

Drew Reese · Accepted Answer · 2021-12-03T20:25:27.940

The issue here is that in RRDv6 the element prop is expecting JSX (i.e. a React.ReactElement), not a function returning JSX.

Routes & Route

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

<Route
  path ="/"
  element={() => { // <-- this is a function, not a ReactElement
    return (
      <>
        <AddToDo addTodo={addTodo} />
        <Todos todos={todos} onDelete={onDelete} />
      </>
    )
  }}
/>

Render the JSX directly.

<Route
  path ="/"
  element={(
    <> // <-- now a ReactElement
      <AddToDo addTodo={addTodo} />
      <Todos todos={todos} onDelete={onDelete} />
    </>
  )}
/>

Alternatively, you could also abstract the anonymous React component definition into a named React component and render as JSX.

const Home = () => {
  return (
    <>
      <AddToDo addTodo={addTodo} />
      <Todos todos={todos} onDelete={onDelete} />
    </>
  )
};

...

<Route
  path ="/"
  element={<Home />} // <-- now a ReactElement
/>

Props of path "/" is not rendering on site?

1 Answers1