Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner

i had pass props function to add contact to an array of objects contact for passing it to a child component but the function don’t work as it expected to work the function’s name "addContacts "
I don’t know what is the problem exactly please someone help me.

this is the App.js file code :


import React, {useState} from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";

import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  /*
  Define state variables for 
  contacts and appointments 
  */
const [contacts, setContacts] = useState([{name:"Farid", phone:+14570258, email:"faridgh@farou.com"}, {name:"Ali", phone:+28573258, email:"alimm6@alia.com"}, {name:"Kamel", phone:+14970603, email:"kamel04@kam.com"}]);
const [appointments, setAppointments] = useState([{title:"work", date:"27/10/2021", time:"9:00"},
{title:"change time", date:"24/10/2021", time:"8:30"}, {title:"health care", date:"02/11/2021", time:"9:00"}]);
  const ROUTES = {
    CONTACTS: "/contacts",
    APPOINTMENTS: "/appointments",
  };

  /*
  Implement functions to add data to
  contacts and appointments
  */
  const addContacts = (name, phone, email) => {
    let contact = {
      name: name,
      phone: phone,
      email: email,
    };
    setContacts(prevContacts => [...prevContacts, contact]

    )
  };
  const addAppointments = (title, contact, date, time) =>{
const appointment = {
  title: title,
  contact: contact,
  date: date,
  time: time
};
setAppointments(prevAppointments => [...prevAppointments, appointment])
  }

  return (
    <>
      <nav>
        <NavLink to={ROUTES.CONTACTS} activeClassName="active">
          Contacts
        </NavLink>
        <NavLink to={ROUTES.APPOINTMENTS} activeClassName="active">
          Appointments
        </NavLink>
      </nav>
      <main>
        <Switch>
          <Route path={ROUTES.CONTACTS}>
        
            <ContactsPage onAdd={addContacts}  data={contacts}  />
          </Route>
          <Route path={ROUTES.APPOINTMENTS}>
          
            <AppointmentsPage onAdd={addAppointments} data={appointments} />
          </Route>
        </Switch>
      </main>
    </>
  );
}

export default App;

this is the contactsPage code file :

import React, {useState, useEffect} from "react";
import ContactForm from "../../components/contactForm/ContactForm";

export const ContactsPage = (props) => {
  /*
  Define state variables for 
  contact info and duplicate check
  */
  const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const [isduplicated, setIsduplicated] = useState(false);

const {data} = props;

    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
    const handleSubmit = (e) => {
     
    e.preventDefault();
    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
    
if (isduplicated) {
  
  return

} 
props.onAdd(name, phone, email);
  window.alert(props.contacts)
  }


  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */
    useEffect(()=> {
   const contact = {};
    contact.name = name;
    contact.phone = phone;
    contact.email = email;
  if (data.find(element=> element.name === contact.name)) {
    setIsduplicated(true);
  } 

}, [name, phone, email, data]) 

  return (
    <div>
      <section>
        <h2>Add Contact</h2> 
        <ContactForm onSubmit={handleSubmit} onChange={(event)=> setName(event.target.value), (event)=>setPhone(event.target.value), (event) =>setEmail(event.target.value)}  />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <div className="contacts">
    {props.data.map((contact, index) => { 
           return (<ul key={index}>
           <h2></h2>
        <li>{contact.name}</li>
        <li>{contact.phone}</li>
        <li>{contact.email}</li>
        </ul>)})}
        </div>
    </section>
    </div>
  );
};

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner

Hi, can you describe the behaviour you expect and how the program does not meet your expectation exactly? Do you get an error message?

the behaviour to expect is when i type submit button the new connect will be adding to the contacts array
but when I clicked it nothing happen only the form become empty

Does the alert pop up?

no never nothing pop up

Then isduplicate is probably true. Did you log that? And did you log name? What does it say?

that’s what appear in the console "index.compiled.js:1 Uncaught SyntaxError: Unexpected token ‘<’ " and this :
webpackHotDevClient.js:138 src\App.js
Line 2:25: ‘Redirect’ is defined but never used no-unused-vars

src\containers\appointmentsPage\AppointmentsPage.js
Line 9:9: ‘handleSubmit’ is assigned a value but never used no-unused-vars

src\containers\contactsPage\ContactsPage.js
Line 56:93: Unexpected use of comma operator no-sequences
Line 64:12: Headings must have content and the content must be accessible by a screen reader jsx-a11y/heading-has-content
printWarnings @ webpackHotDevClient.js:138
webpackHotDevClient.js:138 src\App.js
Line 2:25: ‘Redirect’ is defined but never used no-unused-vars

src\containers\appointmentsPage\AppointmentsPage.js
Line 9:9: ‘handleSubmit’ is assigned a value but never used no-unused-vars

src\containers\contactsPage\ContactsPage.js
Line 57:93: Unexpected use of comma operator no-sequences
Line 65:12: Headings must have content and the content must be accessible by a screen reader jsx-a11y/heading-has-content

Might be caused by this. What should that do?

for changing the cantact variable (name, phone, email) to handle the change my friend. i found it in internet you can set multiple functions to one event handler attribute

Can you be more specific? Do you want to pass props? That currently is an invalid mix of a props that calls a function on value change (onChange) and passing props with comma separation. That causes a syntax error.
Which component do you want to change the variables?

yes all the variables (name, phone, email) when it change it will be handled

Yes what? Pass props to the ContactForm component or call a function on change of a value in the current component (which is contactsPage)? Try to be more specific. That will help you to fix it. That line currently does not make sense and causes a syntax error.

1 Like

thank you i will try it

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.