RJV does not reflect back the json in tree when json state is changed

I am using React JSON View to dynamically update the source object linked with the tree. However I am not able to do so because it doesn’t take into account the changes in the object through state change. Hence, I see the old json even though new keys are added or removed. Here’s a small example showing the behaviour, what I want here is that whenever the setInterval calls the add function and adds a key to the json object, it should show that key in the tree as well.

Note: When I collapse and expand the tree again, it does show the updated json.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactJsonView from 'react-json-view'

class JSONViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {json: {
      Name: 'Kamesh',
      Age: 23,
      Array: [1, 2, 3]
    }};
  }
  
  render() {
    return (
      <div>
        <ReactJsonView src={this.state.json}/>
      </div>
    );
  }

  componentDidMount() {
   setInterval(
      () => {
        let x = Math.random();
        this.add(Object.assign(this.state.json, {
          [x]: 'RandomKey' 
        }))
      },
      3000
    );
  }

  add(newJSON) {
    this.setState({
      json: newJSON
    });
  }
}

ReactDOM.render(<JSONViewer />, document.getElementById('root'));

[nsourov]

<ReactJson src={JSON.parse(JSON.stringify(json))}  />

This works well 😃

[Commandos87]

I encountered the same problem and could solve it by parsing the JSON string to an actual JSON object:

This did’nt work: <ReactJson src={this.state.label} theme="monokai"/>

This works: <ReactJson src={JSON.parse(this.state.label)} theme="monokai"/>

Best regards, Sven