How to make a POST API call in React? - reactjs

Question

I am creating a react program for front-end which makes a api call when a form is submitted, I want the contents of the form to be sent in JSON format
Back-end code works fine, back-end is written in python and it works fine when I test using postman.
import React, { Component } from "react"
class MainCon extends Component {
constructor() {
super()
this.state = {
systemId: "",
password: "",
systemType: "",
ip: "",
portNumber: "",
sourceAddressTon: "",
sourceAddressNpi: "",
sourceAddress: "",
destinationAddressTon: "",
destinationAddressNpi: "",
destinationAddress: "",
registeredDelivery: "",
dataCoding: "",
shortMessage: "",
id: "",
//isFriendly: false,
messageMethod: "",
//favColor: "blue"
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
//const {name, value, type, checked} = event.target
// type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
const { name, value } = event.target
this.setState({ [name]: value })
}
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log(event.target);
let object = {}
for (const [key, value] of data.entries()) {
object[key] = value
}
/*
const headers = new Headers();
headers.append('Content-Type', 'application/json');
const options = {
method: 'POST',
headers,
body: JSON.stringify(object),
};
const request = new Request('http://127.0.0.1:5000/api/add_message', options);
const response = fetch(response);
const status = response.status;
if (status === 201) {
this.fetchAll()
}
*/
fetch('http://127.0.0.1:5000/api/add_message/', {
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
body: JSON.stringify(object),
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<br />
<label htmlFor="systemId">System ID</label>
<input
type="text"
value={this.state.systemId}
name="systemId"
placeholder="System ID"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="password">Password:</label>
<input
type="text"
value={this.state.password}
name="password"
placeholder="Password"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="systemType">System Type:</label>
<input
type="text"
value={this.state.systemType}
name="systemType"
placeholder="System Type"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="ip">IP:</label>
<input
type="text"
value={this.state.ip}
name="ip"
placeholder="IP"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="portNumber">Port Number:</label>
<input
type="text"
value={this.state.portNumber}
name="portNumber"
placeholder="Port Number"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="sourceAddressTon">Source Address Ton:</label>
<input
type="text"
value={this.state.sourceAddressTon}
name="sourceAddressTon"
placeholder="Source Address Ton"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="sourceAddressNpi">Source Address Npi:</label>
<input
type="text"
value={this.state.sourceAddressNpi}
name="sourceAddressNpi"
placeholder="Source Address Npi"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="sourceAddress">Source Address:</label>
<input
type="text"
value={this.state.sourceAddress}
name="sourceAddress"
placeholder="Source Address"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="destinationAddressTon">Destination Address Ton:</label>
<input
type="text"
value={this.state.destinationAddressTon}
name="destinationAddressTon"
placeholder="Destination Address Ton"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="destinationAddressNpi">Destination Address Npi:</label>
<input
type="text"
value={this.state.destinationAddressNpi}
name="destinationAddressNpi"
placeholder="Destination Address Npi"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="destinationAddress">Destination Address:</label>
<input
type="text"
value={this.state.destinationAddress}
name="destinationAddress"
placeholder="Destination Address"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="registeredDelivery">Registered Delivery:</label>
<input
type="text"
value={this.state.registeredDelivery}
name="registeredDelivery"
placeholder="Registered Delivery"
onChange={this.handleChange}
/>
<br />
<br />
<label htmlFor="dataCoding">Data Coding:</label>
<input
type="text"
value={this.state.dataCoding}
name="dataCoding"
placeholder="Data Coding"
onChange={this.handleChange}
/>
<br />
<br />
<label>
<input
type="radio"
name="messageMethod"
value="randomMessage"
checked={this.state.messageMethod === "randomMessage"}
onChange={this.handleChange}
/> Random Message
</label>
<label>
<input
type="radio"
name="messageMethod"
value="customMessage"
checked={this.state.messageMethod === "customMessage"}
onChange={this.handleChange}
/> Custom Message
</label>
<br />
<br />
<label htmlFor="shortMessage">Short Message:</label>
<textarea
//className="hideDontTakeUpSpace"
value={this.state.shortMessage}
name="shortMessage"
placeholder="Short Message"
onChange={this.handleChange}
/>
<br />
{/* Formik */}
{/**
<label>Favorite Color:</label>
<select
value={this.state.favColor}
onChange={this.handleChange}
name="favColor"
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
</select>
*/}
{/*<h1>{this.state.systemId} {this.state.password}</h1>*/}
<h2>Type of message: {this.state.messageMethod}</h2>
{/*<h2>Your favorite color is {this.state.favColor}</h2>*/}
<button>Submit</button>
</form>
)
}
}
export default MainCon
This is the server side python code
import requests
import json
from flask import Flask, request, jsonify
from jsonDemoNew import getMemberNew
import redis
app = Flask(__name__)
#app.route('/api/add_message', methods=['GET', 'POST'])
def add_message():
if request.method == 'POST':
content = request.json
print request
print content
return jsonify({"Number of messages sent": 123, "Printed status" : 1})
return "Not POST request"
if __name__ == "__main__":
app.run()
I think there is some problem with the headers I am including

Answer 1

I personally prefer to use axios to make POST requests.
npm install axios --save
Just like on postman:
Select the method ('post' in that case)
Select the url ('http://127.0.0.1:5000/api/add_message/')
Send theData in "json form" like:
{
"data": "oktay"
}
And it's done:
const axios = require('axios');
const postIt = (theData) => {
axios({
method: 'post', // THERE GOES THE METHOD
url: 'http://127.0.0.1:5000/api/add_message/', // THERE GOES THE URL
headers: {},
data: theData
})
.then(function (response) {
console.log("The response of the server: "+response.data);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}
postIt({
"data" : "oktay"
});