sending input value to backend using react & axios - reactjs

Question

I am basically trying to allow myself to edit a field on a page, and then when I am done editing it, just hit the submit button, and it will send it to the backend, where it will update my mongodb collection. I have this (this is my whole page -- so there's no confusion)
import { render } from "react-dom";
import React, { Component } from "react";
import axios from "axios";
import "../styles/TourPage.css";
class TourPage extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
isLoading: true
};
}
componentDidMount() {
axios
.get("/getResults")
.then((res) => {
this.setState({
myData: res.data
});
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
.finally(() => {
this.setState({
isLoading: false
});
});
}
deleteById = (id) => {
console.log(id)
axios
.post(`/deleteDoc`, {id: id} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
editById = (id, location, Services, cnum) => {
console.log(id, location, Services, cnum)
axios
.post(`/editDoc`, {id: id, location: location, Services: Services, cnum: cnum} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
render() {
// You can handle the loader part here with isLoading flag. In this case No data found will be shown initially and then the actual data
let { myData, isLoading } = this.state;
return (
<table id="customers">
<tr>
<th>siteLocation</th>
<th>Services</th>
<th>cnum</th>
</tr>
{myData.length > 0
? myData.map(({ location, Services, cnum, _id }, index) => (
<tr key={index}>
<td><input type="text" placeholder={location} /> </td>
<td>{Services}</td>
<td>{cnum}</td>
<button
onClick={() => this.deleteById(_id)}
disabled={isLoading}
>
Delete
</button>
<button
onClick={() => this.editById(_id, location, Services, cnum)}
disabled={isLoading}
>
Submit Edit
</button>
</tr>
))
: "No Data Found"}
</table>
);
}
}
export default TourPage;
as you an see, in the section where I am making the request to /editDoc, I am trying to pass the edited parameter of <td><input type="text" placeholder={location} /> </td> to the top level function editById. the updated paramater is not being sent. I am new to react, so please bear with me. but thanks for the help all! :)

Answer 1

semantics really matters, why do you use a table if you can use a form.
look, I found couple of things
first when you click the button you need to prevent the default
e.preventDefault()
when you send data to the backend you need to send an Stringified JSON.
set the content-type to application/json
import React from "react";
import axios from "axios";
import "../styles/TourPage.css";
class TourPage extends Component {
constructor(props) {
super(props);
this.state = {
myData: [],
isLoading: true
};
}
componentDidMount() {
axios
.get("/getResults")
.then((res) => {
this.setState({
myData: res.data
});
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
.finally(() => {
this.setState({
isLoading: false
});
});
}
deleteById = (id) => {
console.log(id)
axios
.post(`/deleteDoc`, {id: id} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
editById = (id, location, Services, cnum) => {
console.log(id, location, Services, cnum)
axios
.post(`/editDoc`, JSON.stringify({id: id, location: location, Services: Services, cnum: cnum}),{
headers: {
"Content-Type": "Application/json"
}
} )
.then(() => {
console.log(id, " worked")
window.location = "/tour"
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
}
render() {
// You can handle the loader part here with isLoading flag. In this case No data found will be shown initially and then the actual data
let { myData, isLoading } = this.state;
return (
<table id="customers">
<tr>
<th>siteLocation</th>
<th>Services</th>
<th>cnum</th>
</tr>
{myData.length > 0
? myData.map(({ location, Services, cnum, _id }, index) => (
<tr key={index}>
<td><input type="text" placeholder={location} /> </td>
<td>{Services}</td>
<td>{cnum}</td>
<button
onClick={(e) => {
e.preventDefault();
this.deleteById(_id);
}}
disabled={isLoading}
>
Delete
</button>
<button
onClick={() => this.editById(_id, location, Services, cnum)}
disabled={isLoading}
>
Submit Edit
</button>
</tr>
))
: "No Data Found"}
</table>
);
}
}
export default TourPage;

Answer 2

The problem is that you're not updating the state when you type into the input fields, so when you send the request to /editDoc you're sending the old data.
You need to listen to the onInput event on your input fields like so:
return (
<table id="customers">
<tr>
<th>siteLocation</th>
<th>Services</th>
<th>cnum</th>
</tr>
{myData.length > 0
? myData.map(({ location, Services, cnum, _id }, index) => (
<tr key={index}>
<td><input
type="text"
placeholder={location}
onInput={(e) => this.setState(prevState => ({
...prevState,
myData: [
...prevState.myData,
[index]: {
...prevStep.myData[index],
location: e.target.value
}
]
}))}
/></td>
<td>{Services}</td>
<td>{cnum}</td>
<button
onClick={() => this.deleteById(_id)}
disabled={isLoading}
>
Delete
</button>
<button
onClick={() => this.editById(_id, this.state.myData[index].location, Services, cnum)}
disabled={isLoading}
>
Submit Edit
</button>
</tr>
))
: "No Data Found"}
</table>
);
Note: this is not tested, but it should work