Appointment Planner Not Displaying!

So I am testing my code but nothing displays in the Codecademy browser.

Also I tried completing the project on my local PC but I don’t know how to setup the project.

Kindly assist me.

2 Likes

Hi Nicolas,
usually a syntax error prevents the code from being rendered. In those cases you find an error message in the console (the browser’s console if there is none in the sandbox) that leads you to the source of the error. So what do you see in the console?

This is the error message:

Uncaught ReferenceError: addAppointment is not defined
at App (index.compiled.js:4589)
at dd (react-16-full.min.js:24)
at ws (react-16-full.min.js:24)
at Bs (react-16-full.min.js:24)
at HTMLUnknownElement.o (react-16-full.min.js:24)
at Object.op (react-16-full.min.js:24)
at s (react-16-full.min.js:12)
at Sv (react-16-full.min.js:24)
at fl (react-16-full.min.js:24)
at cl (react-16-full.min.js:24)

Are you trying to render addAppointment anywhere?
There are three typical causes for a reference error:

  • Spelling mistake
  • defined anywhere out of reach
  • not defined at all

Yes. In the component.

This is the code for App.js

import React from “react”;

import { Switch, Route, Redirect, NavLink } from “react-router-dom”;

import { useState } from ‘react’;

import { AppointmentsPage } from “./containers/appointmentsPage/AppointmentsPage”;

import { ContactsPage } from “./containers/contactsPage/ContactsPage”;

function App() {

// state variables for contacts and appointments

const [contacts, setContacts] = useState();

const [appointments, setAppointments] = useState();

const ROUTES = {

CONTACTS: "/contacts",

APPOINTMENTS: "/appointments",

};

// functions to add data to contacts and appointments

const addContact = (name, phone, email ) => {

setContacts( prev => [...prev, {name, phone, email}]);

};

const addAppointment = (title, contact, date, time) => {

setAppointments( prev =>  [...prev, {title, contact, date, time}]);

};

return (

<>

  <nav>

    <NavLink to={ROUTES.CONTACTS} activeClassName="active">

      Contacts

    </NavLink>

    <NavLink to={ROUTES.APPOINTMENTS} activeClassName="active">

      Appointments

    </NavLink>

  </nav>

  <main>

    <Switch>

      <Route exact path="/">

        <Redirect to={ROUTES.CONTACTS} />

      </Route>

      <Route path={ROUTES.CONTACTS}>

         {/* Add props to ContactsPage */}

        <ContactsPage 

          addContact={addContact}

          contacts={contacts}

          />

      </Route>

      <Route path={ROUTES.APPOINTMENTS}>

        {/* Add props to AppointmentsPage */}

        <AppointmentsPage 

          addAppointment={addAppointment}

          appointments={appointments}

          contacts={contacts}

          />

      </Route>

    </Switch>

  </main>

</>

);

}

export default App;

addAppointment has been defined correctly in App.js so I can’t figure out where the error is coming from

No that seems to be defined correctly…
The files can be downloaded if I remember correctly.
To run it locally you just have to download the folder and run ‘npm install’.

I have rectified it, I realized I double-pasted some parts of code in ContactsPage.js
Thanks for that.

Secondly, this is the issue I face when I setup locally:

Looks like you’re trying to run npm start from the wrong directory. When you type ‘pwd’ in the terminal does it log the directory in which the package.json file is located?

This is my “pwd” = $ pwd
/c/Users/eunic/Desktop/DevProject/Appointment Planner

Now, package.json is located in the folder “react_challenge_start”

This is the file directory for the package.json file::

  1. Appointment Planner (folder)
  2. react_challenge_start (folder)
  3. node_modules (folder)
  4. public (folder)
  5. src (folder)
  6. .gitignore (file)
  7. package-lock.json (file)
  8. package.json (file)
  9. yarn.lock (file)

Type cd /react_challenge_start to go to the directory with the package.json with the scripts and then try again…

Okay. So after npm install then npm start right?

You already installed everything successfully. Just ‘npm start’

This is what I am getting. Is it alright to proceed?

Did you install the project twice now?

No but npm start is not working

What is logged when you type ‘pwd’ again?

$ pwd
/c/Users/eunic/Desktop/DevProject/Appointment Planner/react_challenge_start

Then I can’t help.
From your screenshots everything looks alright: The project has been installed successfully. The messages just informs you about vulnerabilties in some dependencies. But that generally doesn’t mean that it’s not working.
In the package.json there must be an entry ‘scripts’ with this:

"start": "react-scripts start",

And if you are in the same directory as this file, ‘npm start’ should work.

Wow this is very exhausting.
Thanks very much for your assistance. I will try to resolve it.