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>
);
};