REACT – .props is not a function

September 29, 2022

I’m trying to create project where the menu and sidebar appear only in the Homepage and the Back button appears in all pages except the Homepage.
The problem is, I can’t pass the props to all pages. Only the FriendDetail and GoBack component are able to pass the props. In all other pages the props isn’t passed.
I need the props to be passed in most of the components so that the Back button is able to appear.

My App.js file:

function App() {
  const [showNav, setShowNav] = useState(true);
  console.log("shownav", showNav);
  return (
    <div className="app">
      <BrowserRouter>
        {showNav && <Menu />}
        {showNav && <Sidebar />}
        {!showNav && <GoBack funcNav={setShowNav} />}

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="duel" element={<Online />} funcNav={setShowNav} />
          <Route
            path="friend/:id"
            element={<FriendDetail funcNav={setShowNav} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

My Online.js file: (one of the many components in the project where I can’t pass the props)

function Online(props) {
  useEffect(() => {
    props.funcNav(false);
  });
  console.log("online", props);
  return <div>Online</div>;
}

My FriendDetail.js file: (only component where I can pass the props)

function Friend(props) {
  let { id } = useParams();
  const data = friendsData.data;

  const [friend, setFriend] = useState();

  useEffect(() => {
    let frienddetail = data.find((e) => e.id == id);
    setFriend(frienddetail);
    props.funcNav(false);
  }, [friend]);
  if (!friend) return;

  return (
    <div>
            <p>{friend.nickname}</p>
    </div>
  );
}

This is the error I’m getting:

Error in the Online.js file

>Solution :

You need to pass the prop to the component instead of the route. The route is only a wrapper. You did this correctly for friend detail.

      <Route path="duel" element={<Online funcNav={setShowNav} />}  />
      <Route
        path="friend/:id"
        element={<FriendDetail funcNav={setShowNav} />}
      />