Below is the code in which I am facing error and unable to fetch data from the database using API. Also the request is being sent through the API but facing error to get data then I checked it on FIDDLER which showed error(mentioned below code) and is not showing any JSON output:
React component
AddOutlet.js:
import React, { useState } from 'react';
import './AddOutletStyle.css';
import { useNavigate } from 'react-router-dom';
const AddOutlet = () => {
const [id, setId] = useState('');
const [name, setOutletType] = useState('');
const [discount, setDiscount] = useState('');
const [responseMessage, setResponseMessage] = useState(''); // State to store the response message
const Navigate = useNavigate();
const handleIdChange = (e) => {
setId(e.target.value);
};
`your text`
const handleOutletTypeChange = (e) => {
setOutletType(e.target.value);
};
const handleDiscountChange = (e) => {
setDiscount(e.target.value);
};
const handleSubmit = async () => {
try {
const response = await fetch('http://localhost:8080/v1/user/actor/provider/outlettype', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id, name, discount }),
});
if (response.ok) {
// Success: Parse and store the response message
const responseData = await response.json();
setResponseMessage(responseData.message);
// Navigate back to OutletTypes page after successful submission
Navigate('/');
} else {
// Handle non-successful response (e.g., validation errors)
console.error('Error adding outlet type:', response.status, response.statusText);
setResponseMessage('Error: ' + response.statusText);
}
} catch (error) {
console.error('Error adding outlet type:', error);
setResponseMessage('Error: ' + error.message);
}
};
return (
<div className="add-outlet-container">
<h1>Add Outlet</h1>
<div className="input-container">
<input
type="text"
placeholder="Enter ID"
value={id}
onChange={handleIdChange}
/>
<input
type="text"
placeholder="Enter Outlet Type"
value={name}
onChange={handleOutletTypeChange}
/>
<input
type="text"
placeholder="Enter Discount"
value={discount}
onChange={handleDiscountChange}
/>
<button className="submit-button" onClick={handleSubmit}>
Submit
</button>
{responseMessage && <p>{responseMessage}</p>}
</div>
</div>
);
};
export default AddOutlet;
FIDDLER:
Raw file:
OPTIONS http://localhost:8080/v1/user/actor/provider/outlettype HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
I tried by making changes in “handleSubmit” by using different ways of using fetch to fetch data using POST method, also made changes in “headers” by taking reference from some sources. I also tried by making changes in giving URL of API in different possible ways. Also checked API requests using fiddler.