How can I set current Project on MongoDB Realm Web APP using React.js

Question

I am following the Task Tracker (Web) with Reaml, Apollo Client and React.js Tutorial and I am getting an on getting the user project. Below is my code

export default function TaskApp() {
  const app = useRealmApp();
  console.log(app.currentUser.customData)
  const [currentProject, setCurrentProject] = React.useState(
    // set the current project as  "My Project"
    app.currentUser.customData.memberOf[0]
  );
  const [isEditingPermissions, setIsEditingPermissions] = React.useState(false);
  return (
    <Container>
      <Sidebar
        css={gridAreaSidebar}
        currentProject={currentProject}
        setCurrentProject={setCurrentProject}
        setIsEditingPermissions={setIsEditingPermissions}
      ></Sidebar>
      <ProjectScreen
        css={gridAreaMain}
        currentProject={currentProject}
        isEditingPermissions={isEditingPermissions}
        setIsEditingPermissions={setIsEditingPermissions}
      />
    </Container>
  );
}

and below is the error am getting and I cannot understand why I am getting the error

TypeError: Cannot read properties of undefined (reading '0')
TaskApp
E:/Web Dev/Realm/realm-tutorial-web/src/TaskApp.js:13
  10 | console.log(app.currentUser.customData)
  11 | const [currentProject, setCurrentProject] = React.useState(
  12 |   // set the current project as  "My Project"
> 13 |   app.currentUser.customData.memberOf[0]
     | ^  14 | );
  15 | const [isEditingPermissions, setIsEditingPermissions] = React.useState(false);
  16 | return (

am still new to realm so please help where possible.

Answer 1

By any chance did you start the tutorial by clicking on "Create App From Template" -> "GraphQL + React App Boilerplate" from the "Realm applications" webpage? That's what I did, and I ran into the same error. The backend template that is created lacks the user schema and most of the server-side functions.

When I started with the "Set up the backend" section, using the CLI interface to create the backend (https://docs.mongodb.com/realm/tutorial/realm-app/), and then moved on to the section for the Web App, everything worked as expected.