Hitting an API in react on submit button (POST request in REACT JS)

import React, { Component } from 'react';
 import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Modals extends Component {
constructor(){
super();
  fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons" ,
 {
  method: 'post',
 headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1OGMyOTdiO  WQzZWM4NjY4MDMwNDBlNjgiLCJlbWFpbCI6ImtrQGxpdGlmZXIuY29tIiwiZmlyc3ROYW1lIjoiS2lzaGxheSIsImxhc3ROYW1lIjoiS2lzaG9yZSIsImlhdCI6MTQ4OTE0NzgzM30.nHW5w3SSov8ySziblmw2VNlGI3CsZFR-v41Jeg9uBVs'
},
body: JSON.stringify({
name: "beacon name",
description: "beacon description here",
uuid: "mnvijefnv",
major: "2",
minor: "2",
manufacturer: "m:2-3=0215,i:4-19,i:20-21,i:22-23,p:24-24",
beaconType: "type1",
location: "main gate1",
floor: "",
zone: "58c29c06d3ec866803040e6e"
})
}).then(function(response){
if(response.ok) {
  console.log(response)
return response;
}
throw new Error('Network response was not ok.');
}).then(function(data) { 
console.log(data);
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error);
});
  }

   render() {
   return (<div><div>
      <div className="animated fadeIn">
        <br /><div className="card" style={{ width: 57 + '%' }}>
          <div className="card-header">
             Beacon Settings
          </div>
          <div className="card-block">
            <div className="input-group mb-1">
              <span className="input-group-addon"><i className="icon-user"></i></span>
              <input type="text" className="form-control" placeholder="UUID" />
            </div>

            <div className="input-group mb-1">
              <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
              <input type="text" className="form-control" placeholder="Major Number"/>
            </div>

            <div className="input-group mb-1">
              <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
              <input type="text" className="form-control" placeholder="Minor Number"/>
            </div>

            <div className="input-group mb-1">
              <span className="input-group-addon"><i className="fa fa-align-justify"></i></span>
              <input type="text" className="form-control" placeholder="Manufacturer Number"/>
            </div><center>
            <Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Save</Link>

<Link to={'/components/tabs'} style={{ width: 27 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Advance Settings</Link>
</center>

        </div>
      </div>
 </div></div>
  </div>
  
    
  
     )
 }
}

export default Modals;