Appointment planner - Contacts not appearing

I completed this project: https://www.codecademy.com/projects/practice/appointment-planner

However nothing shows up in the Contacts after I submit new contact details. After using the react browser plugin I find that the contacts props in not being updated after contact form is submitted. Hence nothing is being sent to the tilelist component. I’ve been troubleshooting for a couple days now so I appreciate any help. I included the contactpage, tilelist and tile component code below. My git repo is at the end.

ContactsPage

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

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 [duplicate, setDuplicate] = useState(false);
 
 
  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
   if(!duplicate){
     props.addContacts(name,phone,email);
     setName('');
     setPhone('');
     setEmail('');
   }
  };

  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */
 useEffect(() => {
  const nameIsDuplicate = () => {
    const found = props.contacts.find((contact) => contact.name === name);
    if (found !== undefined) {
      return true;
    } else {
      return false;
    }
  };

  if (nameIsDuplicate()===true) {
    setDuplicate(true);
  } else {
    setDuplicate(false);
  }
  console.log(nameIsDuplicate());
}, [name,duplicate,props.contacts]);
console.log(props.contacts);
 
  return (
    <div>
      <section>
        <h2>
          Add Contact
          {duplicate? "- Name already exists -" : ""}
          </h2> 
        <ContactForm
          name = {name}
          email = {email}
          phone = {phone}
          setName = {setName}
          setEmail = {setEmail}
          setPhone = {setPhone}
          onSubmit = {handleSubmit} />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList
          list={props.contacts}
        />
      </section>
    </div>
  );
};

Tilelist

import React from "react";
import {Tile} from './../tile/Tile.js';
export const TileList = (props) => {

  console.log(props.list);
  return (
    <div>
     {
     props.list.map((info,index) => 
        <Tile info = {info} key = {index} />
      )
    }
    
    </div>
  );
  
};

Tile

import React from "react";

export const Tile = (props) => {
 const object = props.info;
 const values =  Object.values(object);
  
 console.log(values);
 const info = values.map((value, index) => {
  let className;
  if (index === 0) {
    className='tile-title';
  } else {
    className='tile'
  }
  return <p key={index} className={className} >{value}</p>
  
});
 console.log(info);


return (
  <div className="tile-container">
    {info}
  </div>
);
};

Hello again.

In ContactForm you expect handleSubmit prop (line 10), but passing onSubmit prop from ContactsPage (line 68).

2 Likes