Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
);
}
}
@barbarahf
Copy link

barbarahf commented Mar 17, 2021

Thanks bro

@kirilinko
Copy link

kirilinko commented Jun 25, 2021

thanks

@eugenesang
Copy link

eugenesang commented Aug 19, 2021

Thanks 😊, but I tend to use stateless function components.
Could you please have an update for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment