add user functionality

master
Matt Huntington 5 years ago
parent b98f79ab15
commit 4dec7cf676

@ -15,8 +15,40 @@ class App extends React.Component {
this.setState({ this.setState({
contacts:response.data contacts:response.data
}) })
} })
) }
createUser = (event)=>{
event.preventDefault();
axios
.post(
'https://desolate-thicket-29906.herokuapp.com/api/contacts',
{
name:this.state.newPersonName,
age:this.state.newPersonAge
}
).then(()=>{
axios
.get('https://desolate-thicket-29906.herokuapp.com/api/contacts')
.then((response)=>{
this.setState({
contacts:response.data
})
})
})
}
changeNewPersonName = (event)=>{
this.setState({
newPersonName: event.target.value
})
}
changeNewPersonAge = (event)=>{
this.setState({
newPersonAge: event.target.value
})
} }
render = ()=>{ render = ()=>{
@ -34,9 +66,9 @@ class App extends React.Component {
</section> </section>
<section> <section>
<h2>Create a new Contact</h2> <h2>Create a new Contact</h2>
<form> <form onSubmit={this.createUser}>
Name: <input type="text"/><br/> Name: <input type="text" onKeyUp={this.changeNewPersonName} /><br/>
Age: <input type="number"/><br/> Age: <input type="number" onKeyUp={this.changeNewPersonAge} /><br/>
<input type="submit" value="Create Contact" /> <input type="submit" value="Create Contact" />
</form> </form>
</section> </section>

Loading…
Cancel
Save