'React JS fetch post get error object object error
Post api work postman correctly but Rect JS post not working. Console get this error "POST https://localhost:5001/api/request 400 (Bad Request)" . I tried several time change fetch to axio post but It is not work. I am beginner to react js. I don't know what to do this. I attached my code to this. please help me this is very important.
import React,{useState} from 'react';
import { variables } from "../../Variables";
const Request =() =>{
const [request_user_name, set_request_user_name] = useState('')
const [request_first_name, set_request_first_name] = useState('')
const [request_gender, set_request_gender] = useState('')
const [request_last_name, set_request_last_name] = useState('')
const [request_phone, set_request_phone] = useState('')
const [request_email, set_request_email] = useState('')
const [request_spotify, set_request_spotify] = useState('')
const [request_itunes, set_request_itunes] = useState('')
const [request_youtube, set_request_youtube] = useState('')
const [request_facebook, set_request_facebook] = useState('')
const [request_instagram, set_request_instagram] = useState('')
const handleUsername = (e)=>{
set_request_user_name(e.target.value)
}
const handleFirstname = (e)=>{
set_request_first_name(e.target.value)
}
const handleLastname = (e)=>{
set_request_last_name(e.target.value)
}
const handlePhone = (e)=>{
set_request_phone(e.target.value)
}
const handleEmail = (e)=>{
set_request_email(e.target.value)
}
const handleSpotify = (e)=>{
set_request_spotify(e.target.value)
}
const handlgender = (e)=>{
set_request_gender(e.target.value)
}
const handleitunes = (e)=>{
set_request_itunes(e.target.value)
}
const handleYoutube = (e)=>{
set_request_youtube(e.target.value)
}
const handleFacebook = (e)=>{
set_request_facebook(e.target.value)
}
const handleInstagram = (e)=>{
set_request_instagram(e.target.value)
}
function requestClick(){
console.log(request_user_name);
fetch(variables.API_URL+'request',{
method:'POST',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
body:JSON.stringify({
request_user_name:request_user_name,
request_first_name:request_first_name,
request_last_name:request_last_name,
request_gender:request_gender,
request_phone:request_phone,
request_email:request_email,
request_spotify:request_spotify,
request_itunes:request_itunes,
request_youtube:request_youtube,
request_facebook:request_facebook,
request_instagram:request_instagram
})
})
.then(res=>res.json())
.then((result)=>{
alert(result)
window.location.reload(false);
},(error)=>{
alert('Failed');
})
}
return(
<div>
<center>
<h1>Connect with us</h1>
<hr/>
<h3>Reqest for Account !</h3>
<p></p>
<div className="container">
<br/>
<br/>
<div className="row">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<style>{"\ .txt{\ height:40px; \ }\ "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Username</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_user_name}
onChange={handleUsername}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> First Name</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_first_name}
onChange={handleFirstname}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Last Name</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_last_name}
onChange={handleLastname}/>
</div>
</div>
</div>
</div>
<div className="row">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<style>{"\ .txt{\ height:40px; \ }\ "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Gender</label>
<div className="input-group input-group-lg">
<div class="form-check ">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked
value="1"
onChange={handlgender}/>
<label className="form-check-label ml-3" for="flexRadioDefault1">
Male
</label>
</div>
<div class="form-check">
<input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
value="1"
onChange={handlgender}/>
<label className="form-check-label" for="flexRadioDefault2">
Female
</label>
</div>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Phone Number</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_phone}
onChange={handlePhone}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<div className="mb-3">
<label className="form-label rr d-flex"> Email</label>
<div className="input-group input-group-lg">
<input type="email" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_email}
onChange={handleEmail}/>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<style>{"\ .txt{\ height:40px; \ }\ "} </style>
</div>
<div className="row">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<style>{"\ .txt{\ height:40px; \ }\ "} </style>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Spotify</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_spotify}
onChange={handleSpotify} />
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> itunes</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_itunes}
onChange={handleitunes}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Youtube</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_youtube}
onChange={handleYoutube}/>
</div>
</div>
</div>
</div>
<div className="row">
<style>{"\ .rr{\ float:left;\ }\ "} </style>
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<style>{"\ .txt{\ height:40px; \ }\ "} </style>
<div className="col-2">
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Facebook</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_facebook}
onChange={handleFacebook}/>
</div>
</div>
</div>
<div className="col">
<div className="mb-3">
<label className="form-label rr d-flex"> Instagram</label>
<div className="input-group input-group-lg">
<input type="text" className="form-control txt" id="formGroupExampleInput" placeholder="Username"
value={request_instagram}
onChange={handleInstagram}/>
</div>
</div>
</div>
<div className="col-2">
</div>
</div>
<div className="raw">
<style>{"\ .bb{\ float:right;\ }\ "} </style>
<div className="col-5">
</div>
<div className="col-1">
<button type="button" className="btn btn-success bb"
onClick={requestClick} >Request</button>
</div>
<div className="col-5">
</div>
</div>
</div>
</center>
</div>
)
}
export default Request
Solution 1:[1]
I find the solution, I missed the sending parameters in the radio button value. Then I change the code and now It is work.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Bavindu Dissanayake |