How to use react-json-view - 5 common examples

trainingParams?: ITrainingParams;
    testingParams?: ITestingParams;
    embeddingsAndTrainingDatasetLoaded?: boolean;
    ngramToIdDictionary?: IPretrainedDictionary['NGRAM_TO_ID_MAP'];
    pretrainedNGramVectors?: IPretrainedDictionary['PRETRAINED'];
    datasetStats?: Array<{ intent: string; training: number; testing: number }>;
}

// NOTE: for SSR, wrap the require in check for window (since it's pre rendered by gatsbyjs)
let CodeFlask: any = null;
let ReactJson: any = null;
if (typeof window !== `undefined`) {
    // tslint:disable-next-line:no-var-requires
    CodeFlask = require('codeflask').default;
    // tslint:disable-next-line:no-var-requires
    ReactJson = require('react-json-view').default;
}

export default class Editor extends React.Component {
    public state: IEditorState = {
        activeTabIndex: 0,
        downloadProgress: 0,
        error: null,
        generating: false,
        isDownloading: false,
        showDrawer: false,
        testingDataset: {},
        trainingDataset: {},
        warning: null
    };
    private tabsContainer = React.createRef() as React.RefObject;
    private codeflask: any = null;

render() {
      // eslint-disable-next-line no-undef
      const ReactJson = require('react-json-view').default
      const {
        src
      } = this.props
      const StyledReactJsonContainer = styled.div`
        .string-value {
          text-overflow: ellipsis;
          max-width: 800px;
          overflow: hidden;
          display: inline-block;
        }
      `
      return (
        
          
        
      )

currentAdapter: 'default' | 'rasa' | 'snips' | 'luis';
    useCustomOptions: boolean;
    frequencyDistribution: chatito.distributionType;
    autoAliases: chatito.autoAliasesType;
}

type IDataset = webAdapter.IDefaultDataset | snipsAdapter.ISnipsDataset | rasaAdapter.IRasaDataset | luisAdapter.ILuisDataset;

// NOTE: for SSR, wrap the require in check for window
let CodeFlask = null;
let ReactJson = null;
if (typeof window !== `undefined`) {
    // tslint:disable-next-line:no-var-requires
    CodeFlask = require('codeflask').default;
    // tslint:disable-next-line:no-var-requires
    ReactJson = require('react-json-view').default;
}

export default class Editor extends React.Component<{}, IEditorState> {
    public state: IEditorState = {
        error: null,
        warning: null,
        activeTabIndex: 0,
        showDrawer: false,
        dataset: null,
        adapterOptions: null,
        currentAdapter: 'default',
        useCustomOptions: false,
        frequencyDistribution: 'regular',
        autoAliases: 'allow'
    };
    private tabsContainer = React.createRef() as React.RefObject;

import DevToolStorage from './DevToolStorage';
import * as React from 'react';
import { COLORS } from '../constants';
import saveSetting from '../logic/saveSetting';
import { useState } from 'react';
import search from '../logic/filterObject';
const clone = require('lodash.clonedeep');
let ReactJson = (props: any) =&gt; <div>;
if (typeof window !== 'undefined') {
  ReactJson = require('react-json-view').default;
}

const buttonStyle = {
  margin: '0 10px 0 0',
  padding: '5px 10px',
  display: 'inline',
  fontSize: '12px',
  border: 'none',
  borderRadius: '2px',
};

const toggleStyle = {
  borderRadius: 0,
  display: 'inline',
  padding: 0,
  margin: 0,</div>

import DevToolStorage from './DevToolStorage';
import * as React from 'react';
import { COLORS } from '../constants';
import saveSetting from '../logic/saveSetting';
import { useState } from 'react';
import search from '../logic/filterObject';
const clone = require('lodash.clonedeep');
let ReactJson = (props: any) =&gt; <div>;
if (typeof window !== 'undefined') {
  ReactJson = require('react-json-view').default;
}

const buttonStyle = {
  margin: '0 10px 0 0',
  padding: '5px 10px',
  display: 'inline',
  fontSize: '12px',
  border: 'none',
  borderRadius: '2px',
};

const toggleStyle = {
  borderRadius: 0,
  display: 'inline',
  padding: 0,
  margin: 0,</div>