Completed 2.11

part2/2.11-2.14/src/components/Filter.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Filter = ({value, onChange}) => {
+    return (
+        <div>Search <input value={value} onChange={onChange}/>
+        </div>
+    )
+}
+
+export default Filter

part2/2.11-2.14/src/components/Person.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Person = ({data}) => {
+    return (
+        <ul>
+            {data.map(person => <li key={person.name}>{person.name}: {person.number}</li>)}
+        </ul>
+    )
+}
+
+export default Person

part2/2.11-2.14/src/components/PersonForm.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const PersonForm = ({onSubmit, name, number, handleNumberChange, handleNameChange }) => {
+    return (
+        <form onSubmit={onSubmit}>
+        <div>
+          name: <input value={name} onChange={handleNameChange}/>
+        </div>
+        <div>number: <input type="tel" value={number} onChange={handleNumberChange}/>
+        </div>
+        <div>
+          <button type="submit">add</button>
+        </div>
+      </form>
+    )
+}
+
+export default PersonForm