When User enter the response message in the textbox need to send that value in API Parameter in the same Page. Please share your Idea.
<input type="text" name="responsemessage" onChange={this.handleChange} >
<input type="text" name="uploadId" onChange={this.handleChange} >
handleChange = (e) => {
const { name, value } = e.target;
this.setState({ [name]: value });
console.log(this.state)
}
I need to pass this textbox value to API Parameter in the same page.
This is my API call
handleClick = (event) => {
event.preventDefault();
const data = new FormData(event.target);
let user = JSON.parse(localStorage.getItem('user'));
const accessToken = user;
fetch('http://localhost:00000/api/GetProfile/Add_Comment?responsemessage='{Parameter_value}&uploadId={Parameter_value}, {
method: 'POST',
headers:{
Accept: 'application/json',
Authorization: "Bearer " +accessToken
},
body: data,
});
alert("Added your Comment Successfully!");
window.location.reload();
console.log(data);
}
Thank you all in advance.
In it's current state the URL in your fetch string is not valid javascript. It should look like:
const { responsemessage, uploadId } = this.state;
const url = `http://localhost:00000/api/GetProfile/Add_Comment?responsemessage=${responsemessage}&uploadId=${uploadId}`
Take note of the backticks, and ${} syntax to allow interpolation of the variables into the string.
Using just single or double quotes it would look like this:
const { responsemessage, uploadId } = this.state;
const url = 'http://localhost:00000/api/GetProfile/Add_Comment?responsemessage=' + responsemessage + '&uploadId=' + uploadId;
You have a few not so great practices in your code. You need to get rid of your window reload for starters and instead make use of the component lifecycle. In this case you need to run side effects on mount and when the component will update and update the state accordingly.
You also should wrap your fetch in a try-catch block to handle errors. Let me know if you need further guidance.