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>
);
}
}
@meenu-13
Copy link

meenu-13 commented Nov 13, 2020

qdfghuyjh['p
wertyui

@meenu-13
Copy link

meenu-13 commented Nov 13, 2020

h,fj,fyju

@Iurybub
Copy link

Iurybub commented Nov 25, 2020

h,fj,fyju

Huh?

@lozanasc
Copy link

lozanasc commented Dec 1, 2020

h,fj,fyju

Huh?

He went nuts trying to understand the code.

@aTibrewala
Copy link

aTibrewala commented Dec 26, 2020

h,fj,fyju

Huh?

He went nuts trying to understand the code.

lol

@aTibrewala
Copy link

aTibrewala commented Dec 26, 2020

Thanks mate!

@erylljoy24
Copy link

erylljoy24 commented Jan 12, 2021

OMG this is so helpful! Thanks dude!

@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