Can I use Axios with ReactJS in a static page? - forms

Question

I want to create a contact form for my react app, which is a static app (I have no back-end at all, only front-end). I'm trying to do this with a POST request to a certain API, and I found that Axios may be helpful. I want to do something like when the user clicks the Submit button, it calls a function that does all the validations on the form, and then submit the data via a POST action with Axios.
Is this possible, or am I wrong with my approach? Thanks in advance.

Answer 1

Yes, you can. What you'll want to do is listen for the onSubmit event of your form and send the POST request in that listener. You can do the validation inside that method as well.
handleSubmit(e) {
// Stop browser from submitting the form.
e.preventDefault();
// Validate here or directly when setting state.
// ...
// Then send a POST request to your endpoint.
axios
.post('https://your-form.com/endpoint', {
// Your data goes here.
firstName: this.state.firstName,
lastName: this.state.lastName
})
.then(function(response) {
// Done!
console.log(response);
})
}
// In the render method: listen for the submit event.
<form onSubmit={this.handleSubmit} />
Here's a working example:
class Example extends React.Component {
constructor() {
super();
this.state = {
firstName: '',
lastName: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(e) {
// Stop browser from submitting the form.
e.preventDefault();
// Validate here or directly when setting state.
// Then send a POST request to your endpoint.
axios
.post('https://reqres.in/api/users', {
firstName: this.state.firstName,
lastName: this.state.lastName
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
/>
<input
type="text"
name="lastName"
value={this.state.lastName}
onChange={this.handleChange}
/>
<input type="submit" />
</form>
);
}
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<div id="root"></div>