Update values of edited inputs

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.

Detergent

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

Licentious

The value still does not update after I refresh the page. I dont know if I am ment to add some sort of Edit button or some other component. – Detergent

are you getting data in this.props.record and updated_src ,please console and check – Licentious

Ofcourse I do, I wouldnt even ask If i didnt check that in the first place. – Detergent

i think may be some other mistake you are doing. – Licentious

I dont think so, but this.state.currentForm is still an empty array if I console.log() it. – Detergent

Answer 2

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

Tufa

Can you provide some code on how to fix the issue then? Thank you – Detergent

Show your entire component? – Tufa

Sure, I updated my question. I eventually managed to setState with the updated values. Now I just need to actually update the values in the input, so update the values of the old object with the values from new object. – Detergent

I do not understand the current problem, but maybe that's what you need: componentDidMount() { this.setState({ currentForm: this.props.record }) } – Tufa

That acutally helped a lot, I am now getting a variable that dynamically changes its value depending on how I am changing the value of inputs. But it still does not update the values after refreshing the page. Any ideas how to do that? Thank you – Detergent