Editor doesn't rerender when I change the 'value' props

[dixyxavier]

I am using two editors at same time. An update in one editor should update the second one and viceversa. I have used same state variable in both editors and i have handled onChange in both editors by changing the state variable jsonData. Still when I change JSON data in one editor the other one doesn't rerender. It remains same. The following is my code:

`

<Editor
value={this.state.jsonData}
ajv={ajv}
onChange={ (jsonData) => this.setState({ jsonData }) }
search={false}
navigationBar={false}
/>
<Editor
value={this.state.jsonData}
onChange={ (jsonData) => this.setState({ jsonData }) }
mode="code"
/>

`

[vankop]

<JsonEditor /> is uncontrolled component, so value property is only initial value of json editor. If your task is to use both values in 2 editors you need explicitly get jsoneditors.

For instance:

class YourComponent extends React.Component {
   set1EditorRef = instance => this.editor1 = instance;
   set2EditorRef = instance => this.editor2 = instance;

  1editorChangeHandler = jsonData => {
           this.setState({ jsonData });
          this.editor2.jsonEditor.set(jsonData);
   };

  2editorChangeHandler = jsonData => {
           this.setState({ jsonData });
          this.editor1.jsonEditor.set(jsonData);
   };

  render() {
     return [
           <Editor
                  ref={this.set1EditorRef}
                    value={this.state.jsonData}
                   ajv={ajv}
                   onChange={this.1editorChangeHandler}
                   search={false}
                   navigationBar={false}
             />
            <Editor
                     ref={this.set2EditorRef}
                     value={this.state.jsonData}
                     onChange={this.2editorChangeHandler}
                     mode="code"
             />
     ];
  }
}

[vankop]

The main problem with controlled state is lossing focus in <JsonEditor />(it is a behaviour of josdejong/jsoneditor), thats why I did it as uncontrolled component.

[dixyxavier]

Thank you @vankop

[markdemich]

I have a similar problem, but a little different. I have one editor that I want to change it's contents based on a listbox selection. Currently, there doesn't seem to be a way to do that.

[vankop]

@markdemich you need to get ref of <JsonEditor /> to get access to editor instance explicitly. For instance:

class YourComponent extends React.Component {
   setRef = instance => {
         if (instance) {
                const {jsonEditor} = instance;
               this.jsonEditor = jsonEditor;
         } else {
               this.jsonEditor = null;
         }
   };

  render() {
     return (
          <Editor
                     ref={this.setRef}
             />
    );
  }
}

then you can do what ever you want with jsonEditor using api

[OlegRyzhkov]

I have a little different error. I have 2 tabs, and one contains default tree with json, the second has mode='code'. when I click on the second tab, nothing changed.

[vankop]

@OlegRyzhkov do you using jsoneditor-react as uncontrolled component? If not follow the guide above #3 (comment)

[OlegRyzhkov]

@OlegRyzhkov do you using jsoneditor-react as uncontrolled component? If not follow the guide above #3 (comment)

I exactly made it and it worked, but only if I render both at the same time. also, it rerender if I wrap one of the editor with div. looks like react can't know when to rerender element.
how to you component as controlled?

[OlegRyzhkov]

also, prop onChange doesn't work on json with error. how to know when user type something?

[vankop]

better to control jsoneditor instance by yourself. Regarding to this example #3 (comment).

componentDidMount() {
   if (!this.editor) return;

   const jsonEditor = this.editor.jsonEditor;

  // Use all jsoneditor API regarding to its version, see 
  // https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#methods
}

[vankop]

@OlegRyzhkov do you using jsoneditor-react as uncontrolled component? If not follow the guide above #3 (comment)

I exactly made it and it worked, but only if I render both at the same time. also, it rerender if I wrap one of the editor with div. looks like react can't know when to rerender element.
how to you component as controlled?

it could rerender if div above was destroyed. Small example:

function MyComponent({flag}) {
    return <div>{flag ? <div><JsonEdittor ... /></div> : null}</div>
}

[vankop]

Editor wrapper updates only on https://github.com/vankop/jsoneditor-react/blob/master/src/Editor.jsx#L176