Update values of edited inputs - reactjs

Question

I am using react-admin framework and I am trying to update values of my input dynamically.
In my custom component, I have the onChange() method which looks like this:
onChange = (value) => {
this.setState({ currentForm: this.props.record });
const { updated_src, name, namespace, new_value, existing_value } = value;
this.setState({ currentForm: updated_src });
}
First I am setting that the state currentForm has the original unedited values that are stored in this.props.record. After that I am setting that the state has new value updated_src. That variable stores the object with the new edited values. Both objects this.props.record and updated_src have same keys.
Later in render() I have this field:
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} displayObjectSize={false} onEdit={this.onChange} />}
However if I do console.log(this.state.currentForm); in the onChange() method, it returns an empty array instead of the object with updated values of the field.
My whole component:
import React, { Component, Fragment } from 'react';
import { fetchUtils, CardActions, EditButton, Button, List, Datagrid, Edit } from 'react-admin';
import Drawer from '#material-ui/core/Drawer';
import JsonInput from 'react-json-view';
import { Field } from 'redux-form';
import EditIcon from '#material-ui/icons/Edit';
import IconKeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
import { SimpleForm } from 'ra-ui-materialui/lib/form';
const divStyle = {
width: '400px',
margin: '1em'
};
export default class JsonEditButton extends Component {
constructor(props, context) {
super(props, context);
this.state = { showPanel: false , currentForm: []};
}
onChange = (value) => {
//that works
this.setState({ currentForm: this.props.record }, () => {
const { updated_src, name, namespace, new_value, existing_value } = value;
/* sets the updated values to state */
this.setState({ currentForm: value.updated_src });
});
}
handleClick = () => {
this.setState({ showPanel: true });
};
handleCloseClick = () => {
this.setState({ showPanel: false });
};
render() {
const { showPanel } = this.state;
return (
<div>
<Button label="Upravit JSON" onClick={this.handleClick}>
<EditIcon />
</Button>
<Fragment>
<Drawer
anchor="right"
open={showPanel}
onClose={this.handleCloseClick}
>
<div>
<Button label="Zavřít" onClick={this.handleCloseClick}>
<IconKeyboardArrowRight />
</Button>
</div>
<div style={divStyle}>
{this.props.record && <JsonInput src={this.props.record} name={null} displayDataTypes={false} onKeyPressUpdate={true} displayObjectSize={false} onEdit={this.onChange} />}
</div>
</Drawer>
</Fragment>
</div>
);
}
};
Any ideas why this code is not working and how to solve this issue?
Thank you in advance.

Answer 1

onChange = (value) => {
this.setState({ currentForm: this.props.record },()=>{
console.log("---currentForm------ >",
this.state.currentForm,this.props.record)
this.callFn(value)
});
}
callFn = (value) => {
const { updated_src, name, namespace, new_value, existing_value } = value;
this.setState({ currentForm: updated_src },()=>{
console.log("---->newData",this.state.currentForm,updated_src)
});
}
try this way ,i think it should help,
just check this console you will get ,why your array is not updating

Answer 2

The React setState() method is asynchronous and only completes after your onChange() handler has completed!