I see two problems:Front End : Capture the state of React's input.Back End : Send the new state to BD.Note: There are some points you need to check on your side. It's not a definitive answer.Front EndYou said the following:From the front I do not update the state with the new value. That's supposed to be the handleInput handler Right now, you should have an error in the console related to uncontrolled component.Controlled ComponentFirst, we must synchronize React state with the input of vDOM, according to the object you expect to receive from BD, in state the following structure is required:this.state = {
userDetail : {
updatedAt:'',//revisa mis notas en relación a esta llave al final
username: ''
}
}
The input can remain this way, changes the value of the property name a username:<input
placeholder='Name'
name='username'
type='text'
value={this.state.userDetail.username}
onChange={this.handleInputChange}
/>
Then comes the first snapshot (re-render) in componentDidMountI think we have to apply a parse to the server response, before assigning to state; here I am assuming that, as you mentioned in the comments, you are receiving the following structure BD: {updateAt:value, username:value}:componentDidMount = () => {
const id = this.props.match.params.userId
this.userService.getOneUser(id)
.then(response => {
const pResponse = JSON.parse(response.data);
const userDetail = Object.assign({}, pResponse);
this.setState({ userDetail });
).catch(err => console.log(err))
}
Next, you have to add the handle to the component builder (do the binding of the custom method handleInputChange(c):constructor(props) {
super(props);
this.state = {
userDetail : {
updatedAt:'',
username: ''
}
};
this.userService = new UserService();
this.handleInputChange = this.handleInputChange.bind(this);
}
Finally, the function handleInputChange You can stay like this:handleInputChange = e => {
const name= e.target.name;
const value = e.target.value;
this.setState({ userDetail[name]: value });
console.log('handle’);
}
What you're trying to do is synchronize userDetail.username of the state object, with the input of vDOM; this synchronization applies when it is required that React control the value of any input element, it known as controlled components.Once these changes have been made, the synchrony between the input of the user and the status of the property this.state.userDetail.username: handleInputChange = e => {
const name= e.target.name;
const value = e.target.value;
this.setState({ userDetail[name]: value });
console.log('handle' + this.state.userDetail);
}
BackYou said the following:Of course, from back you expect all the fields that are editable, but when you do not receive them, you update it as null in Mongo. And of course, this is where my madness comes from, because I don't know if I have to do it from front or back.The normal is to complete the operation update from backend, update in BD.Here, as I point out, colleague @isaac, in the method of persistence, is only sending the id:
this.userService.editUser(id)I know how the method is implemented this.userService.editUser(), but regularly send the idalong with the value you want to upgrade to BD, in this case is the value of the key username object this.state.userDetail, maybe if you send it that way, it works (here you should check it on your side):const stateCopy = this.state.userDetail.username;
this.userService.editUser(id, stateCopy).then(response => console.log(response.data))
.catch(err => console.log(err))
I suggest reviewing what kind of argument besides the id , consume the method this.userService.editUser(id, argumentos), maybe give some format to this.state.userDetail.usernamebefore passing it; or perhaps all the keys to the object are requested userDetail (username, updateAt), that should also be verified on your side.Finally, I see the key very suspicious. updatedAt, the common sense indicates that it is a Date object, which should record when the last change was made in the form. If so, you may also need to give it the correct format and send it to the persistence method along with username.I hope this answer is helpful.
