import React, { useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const [contacts, setContacts] = useState([ { name: "Guy Fieri", number: "020-4837473" }, { name: "Gordon Ramsay", number: "75749483832" }, { name: "Mr. Tasty", number: "43-4982839" }, { name: "Dude man", number: "11-33-448382" } ]); const [newName, setNewName] = useState(""); const [newNumber, setNewNumber] = useState(""); const [showAll, setShowAll] = useState(true); const [filterBy, setFilterBy] = useState(""); const rows = () => { console.log(filterBy); const contactsToShow = showAll ? contacts : contacts.filter(contact => { const c = contact.name.toUpperCase(); const filter = filterBy.toUpperCase(); return c.search(filter) !== -1; }); contactsToShow.map(contact => { console.log(contact); return (

); }); }; const handleContactNameChange = event => { console.log(event.target.value); setNewName(event.target.value); }; const handleContactNumberChange = event => { console.log(event.target.value); setNewNumber(event.target.value); console.log(newNumber); }; const handleFiltering = event => { console.log(event.target.value); setFilterBy(event.target.value); setShowAll(false); console.log(filterBy); }; const addContact = event => { event.preventDefault(); // if (newName === "") return true; if (newNumber === "") return true; let dup = false; contacts.forEach(contact => { if (contact.name === newName) dup = true; }); if (!dup) { const contactObject = { name: newName, number: newNumber }; setContacts([...contacts, contactObject]); setNewName(""); setNewNumber(""); } }; return (

Phonebook

{rows()}

); }; export default App; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);

vibrant-dawn-o1r1y