ReactJS, Making POST Request - json

Question

I tried to create POST request in ReactJS however it does not work I keep getting
POST http://localhost:3000/ 404 (Not Found)
error,
Can someone help me please what I am doing wrong I have been trying to do it for more than 4 hours now and it is getting annoying :/
Here is my app.jsx File
import React from 'react';
import ReactDOM from 'react-dom';
import "./main.css";
import $ from 'jquery';
class ContactForm extends React.Component{
componentDidMount(){
var $form = $('.send_JSON');
var $inputName = $('.get_name');
var $inputAge = $('.get_age');
var $inputPrefix = $('.get_prefix');
var $inputEmail = $('.get_email');
var url = 'http://localhost:3000/'; //Configurable endpoint
function loadJSON(){
$.ajax({
url: url,
dataType: 'json'
}).done(function(res){
console.log(res);
console.log("DONE!")
}).fail(function(error){
console.log(error);
console.log("NOT DONE!")
});
}
function sendForm(send_name, send_age, send_prefix, send_email){
$.ajax({
url: url,
method: 'post',
dataType: 'json',
data : {
name : send_name,
age : send_age,
prefix : send_prefix,
email : send_email
}
}).done(function(res){
loadJSON();
console.log(res);
}).fail(function(error){
console.log('Error while sending Form');
readyToSubmit : '0';
});
}
$form.on('submit', function(e){
e.preventDefault();
var name = $inputName.val();
var age = $inputAge.val();
var prefix = $inputPrefix.val();
var email = $inputEmail.val();
if(name !== '' && age > 0 && email !== ''){
sendForm(name, age, prefix, email);
$inputName.val('');
$inputAge.val(0);
$inputPrefix.val('');
$inputEmail.val('');
}
});
}
state = {
name: 'Name',
age: '',
prefix: '-',
email : 'E-mail address',
nameCheck: '',
ageCheck: '',
emailCheck: '',
readyToSubmit: ''
}
handleSubmit = (e)=>{
e.preventDefault()
sendForm();
this.setState({
nameCheck: this.state.name.length <= 0 && 'Name field has to be filled.',
ageCheck: this.state.age.length <= 0 && 'Age has to be more than 0',
emailCheck: this.state.email.search('#') <= 0 && 'Email field has to be filled and consist #',
readyToSubmit: this.state.name.length > 0 && this.state.age.length > 0 && this.state.email.search('#') > 0 ? `Success ${this.state.name}` : '',
})
}
handleChange = e =>{
this.setState({
name: e.target.value,
})
}
handleChange2 = e =>{
this.setState({
age: e.target.value
})
}
handleChange3 = e =>{
this.setState({
prefix: e.target.value
})
}
handleChange4 = e =>{
this.setState({
email: e.target.value
})
}
clearForm = () => {
document.getElementById("sendForm").reset();
this.setState({
name: "",
age: "",
prefix: "Mr",
email: " "
})
}
render(){
return(
<div>
<span className="tooltip">{this.state.readyToSubmit}</span>
<form onSubmit = {this.handleSubmit} id="sendForm" className="send_JSON">
<h2>Sii Application</h2>
<img src="../img/logo.png"/>
<p>Your Name</p>
<span className="tooltip">{this.state.nameCheck}</span>
<input onChange = {this.handleChange} value ={this.state.name} className="get_name"/>
<p>Your Age</p>
<span className="tooltip">{this.state.ageCheck}</span>
<input onChange = {this.handleChange2} value ={this.state.age} type="number" min="10" max="100" className="get_age"/>
<p>Your Prefix</p>
<select onChange = {this.handleChange3} value = {this.state.prefix} className="get_prefix">
<option value = 'Mr'>Mr</option>
<option value = 'Ms'>Ms</option>
<option value = 'Mrs'>Mrs</option>
</select>
<p>Your Email</p>
<span className="tooltip">{this.state.emailCheck}</span>
<input onChange = {this.handleChange4} value ={this.state.email} type="email" className="get_email"/>
<button type="reset" onClick = {this.clearForm} name="clear">Clear</button>
<button type="submit" name="send">Send</button>
</form>
</div>
)
}
}
class App extends React.Component {
render(){
return <ContactForm/>
}
}
document.addEventListener('DOMContentLoaded', function(){
ReactDOM.render(
<App/>,
document.getElementById('app')
);
});
I dont know if there is other way to do so, I tried Axio - which didnt work for me at all.

Answer 1

I suggest you looking at fetch() API instead of using jQuery Ajax to make HttpRequest. It is more lightweight and will make your code looks much simpler. Here is a link to the blog from Jake Archibald and was suggested by Google to learn how to use fetch():
https://jakearchibald.com/2015/thats-so-fetch/
Also, you can find some useful examples here from Google official documents:
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
I hope it helps.

Answer 2

Adding to the fetch() API, you can also use axios for making HttpRequest.
It is promise based HTTP client for the browser and node.js.
Documentation is simple and available here.
Here is the example for GET request:
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Want to use async/await? Add the `async` keyword to your outer
function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}