Skip to content

Instantly share code, notes, and snippets.

@fidaay
Forked from whoisryosuke/api-form-submit.js
Created March 7, 2021 19:26
Show Gist options
  • Save fidaay/4d6e9d3fcac385ce8b85d36fe4b85170 to your computer and use it in GitHub Desktop.
Save fidaay/4d6e9d3fcac385ce8b85d36fe4b85170 to your computer and use it in GitHub Desktop.
React - Handling forms and submitting POST data to API -- @see: https://reactjs.org/docs/forms.html
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
handleChange = (event) => {
this.setState({[event.target.name]: event.target.value});
}
handleSubmit = (event) => {
alert('A form was submitted: ' + this.state);
fetch('https://your-node-server-here.com/api/endpoint', {
method: 'POST',
// We convert the React state to JSON and send it as the POST body
body: JSON.stringify(this.state)
}).then(function(response) {
console.log(response)
return response.json();
});
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} name="name" onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment