delete functionality

src/App.js

@@ -9,7 +9,7 @@ class App extends React.Component {
 		contacts: []
 	}
 
-	componentDidMount = ()=>{
+	getPeople = ()=>{
 		axios
 			.get('https://desolate-thicket-29906.herokuapp.com/api/contacts')
 			.then((response)=>{
@@ -19,6 +19,10 @@ class App extends React.Component {
 			})
 	}
 
+	componentDidMount = ()=>{
+		this.getPeople();
+	}
+
 	createUser = (event)=>{
 		event.preventDefault();
 		axios
@@ -29,13 +33,7 @@ class App extends React.Component {
 					age:this.state.newPersonAge
 				}
 			).then(()=>{
-				axios
+				this.getPeople();
-					.get('https://desolate-thicket-29906.herokuapp.com/api/contacts')
-					.then((response)=>{
-						this.setState({
-							contacts:response.data
-						})
-					})
 			})
 	}
 
@@ -60,7 +58,7 @@ class App extends React.Component {
 				<ul>
 					{
 						this.state.contacts.map((contact)=>{
-							return <Person data={contact} />
+							return <Person refreshCallback={this.getPeople} data={contact} />
 						})
 					}
 				</ul>

src/components/person.js

@@ -3,10 +3,18 @@ import axios from 'axios';
 
 
 class Person extends React.Component {
+	deletePerson = ()=>{
+		axios
+			.delete(
+				`https://desolate-thicket-29906.herokuapp.com/api/contacts/${this.props.data.id}`
+			).then(()=>{
+				this.props.refreshCallback();
+			})
+	}
 	render = ()=>{
 		return <li key={this.props.data.id}>
 			{this.props.data.name} is {this.props.data.age} years old
-			<button>Delete</button>
+			<button onClick={this.deletePerson}>Delete</button>
 		</li>
 	}
 }