27 lines
774 B
JavaScript
27 lines
774 B
JavaScript
|
import { useState } from 'react'
|
||
|
|
||
|
import Filter from './components/Filter'
|
||
|
import Form from './components/Form'
|
||
|
import Numbers from './components/Numbers'
|
||
|
|
||
|
const App = () => {
|
||
|
const [filter, setFilter] = useState('')
|
||
|
const [persons, setPersons] = useState([
|
||
|
{ name: 'Arto Hellas', number: '040-123456', id: 1 },
|
||
|
{ name: 'Ada Lovelace', number: '39-44-5323523', id: 2 },
|
||
|
{ name: 'Dan Abramov', number: '12-43-234345', id: 3 },
|
||
|
{ name: 'Mary Poppendieck', number: '39-23-6423122', id: 4 }
|
||
|
])
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<h1>Phonebook</h1>
|
||
|
<Filter filter={filter} setFilter={setFilter} />
|
||
|
<Form persons={persons} setPersons={setPersons} />
|
||
|
<Numbers persons={persons} filter={filter.toLowerCase()} />
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
export default App
|