Pretty Printing JSON with React

Question

I m using ReactJS and part of my app requires pretty printed JSON     I get some JSON like     foo   1   bar   2    and if I run that through JSON stringify obj  null  4  in the browser console  it pretty prints  but when I use it in this react snippet    render  function       var json   this getStateFromFlux   json    return        lt div gt         lt JsonSubmitter onSubmit  this onSubmit    gt          JSON stringify json  null  2         lt  div gt            it renders gross JSON that looks like      foo     2    bar    2  n      How do I get those characters to be interpreted properly

User · Answer

The  react-json-view  provides solution rendering json string   import ReactJson from  react-json-view    lt ReactJson src  my important json  theme  monokai    gt

User · Answer

Just to extend on the WiredPrairie s answer a little  a mini component that can be opened and closed   Can be used like    lt Pretty data  this state data   gt      export default React createClass        style            backgroundColor    1f4662           color    fff           fontSize   12px               headerStyle            backgroundColor    193549           padding   5px 10px           fontFamily   monospace           color    ffc600               preStyle            display   block           padding   10px 30px           margin   0           overflow   scroll               getInitialState             return               show  true                         toggle             this setState               show   this state show                          render             return                lt div style  this style  gt                   lt div style  this headerStyle  onClick   this toggle   gt                       lt strong gt Pretty Debug lt  strong gt                   lt  div gt                     this state show                        lt pre style  this preStyle  gt                           JSON stringify this props data  null  2                         lt  pre gt    false                 lt  div gt                         Update  A more modern approach  now that createClass is on the way out   import styles from    DebugPrint css   import autoBind from  react-autobind  import classNames from  classnames  import React from  react   export default class DebugPrint extends React PureComponent     constructor props        super props      autoBind this      this state           show  false                   toggle         this setState         show   this state show                 render         return          lt div style  styles root  gt           lt div style  styles header  onClick  this toggle  gt             lt strong gt Debug lt  strong gt           lt  div gt           this state show                             lt pre style  styles pre  gt                 JSON stringify this props data  null  2                 lt  pre gt                          null                  lt  div gt                And your style file   root       backgroundColor    1f4662       color    fff       fontSize   12px       header       backgroundColor    193549       padding   5px 10px       fontFamily   monospace       color    ffc600       pre       display   block       padding   10px 30px       margin   0       overflow   scroll

User · Answer

You ll need to either insert BR tag appropriately in the resulting string  or use for example a PRE tag so that the formatting of the stringify is retained   var data     a  1  b  2     var Hello   React createClass       render  function             return  lt div gt  lt pre gt  JSON stringify data  null  2    lt  pre gt  lt  div gt              React render  lt Hello   gt   document getElementById  container       Working example   Update  class PrettyPrintJson extends React Component       render                 data could be a prop for example             const   data     this props           return   lt div gt  lt pre gt  JSON stringify data  null  2    lt  pre gt  lt  div gt             ReactDOM render  lt PrettyPrintJson  gt   document getElementById  container         Stateless Functional component  React  14 or higher  const PrettyPrintJson     data     gt            destructured  data could be a prop for example     return   lt div gt  lt pre gt   JSON stringify data  null  2    lt  pre gt  lt  div gt        Or       const PrettyPrintJson     data     gt    lt div gt  lt pre gt        JSON stringify data  null  2    lt  pre gt  lt  div gt      Working example  Memo   16 6    You might even want to use a memo  16 6    const PrettyPrintJson   React memo   data     gt    lt div gt  lt pre gt       JSON stringify data  null  2    lt  pre gt  lt  div gt

User · Answer

Here is a demo react hooks debug print html in react hooks that is based on Chris s answer  The json data example is from https   json org example html    lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  UTF-8    gt       lt title gt Hello World lt  title gt       lt script src  https   unpkg com react 16 umd react development js  gt  lt  script gt       lt script src  https   unpkg com react-dom 16 umd react-dom development js  gt  lt  script gt        lt  -- Don t use this in production  -- gt       lt script src  https   unpkg com babel-standalone 6 15 0 babel min js  gt  lt  script gt     lt  head gt     lt body gt       lt div id  root  gt  lt  div gt       lt script src  https   raw githubusercontent com cassiozen React-autobind master src autoBind js  gt  lt  script gt        lt script type  text babel  gt   let styles       root    backgroundColor    1f4662   color    fff   fontSize   12px        header    backgroundColor    193549   padding   5px 10px   fontFamily   monospace   color    ffc600        pre    display   block   padding   10px 30px   margin   0   overflow   scroll        let data        glossary          title    example glossary        GlossDiv            title    S          GlossList              GlossEntry                ID    SGML              SortAs    SGML              GlossTerm    Standard Generalized Markup Language              Acronym    SGML              Abbrev    ISO 8879 1986              GlossDef                  para    A meta-markup language  used to create markup languages such as DocBook                 GlossSeeAlso                    GML                  XML                                        GlossSee    markup                                 const DebugPrint        gt      const  show  setShow    React useState false      return        lt div key  1  style  styles root  gt       lt div style  styles header  onClick       gt  setShow  show     gt           lt strong gt Debug lt  strong gt       lt  div gt        show                   lt pre style  styles pre  gt          JSON stringify data  null  2           lt  pre gt                  null            lt  div gt         ReactDOM render     lt DebugPrint data  data    gt      document getElementById  root            lt  script gt      lt  body gt   lt  html gt     Or in the following way  add the style into header        lt style gt   root   background-color   1f4662  color   fff  fontSize  12px     header   background-color   193549  padding  5px 10px  fontFamily  monospace  color   ffc600     pre   display  block  padding  10px 30px  margin  0  overflow  scroll         lt  style gt    And replace DebugPrint with the follows   const DebugPrint        gt         https   stackoverflow com questions 30765163 pretty-printing-json-with-react   const  show  setShow    React useState false      return        lt div key  1  className  root  gt       lt div className  header  onClick       gt  setShow  show     gt           lt strong gt Debug lt  strong gt       lt  div gt        show                   lt pre className  pre  gt          JSON stringify data  null  2           lt  pre gt                  null            lt  div gt

User · Answer

const getJsonIndented    obj    gt  JSON stringify newObj  null  4  replace             g       const JSONDisplayer     children     gt         lt div gt           lt pre gt  getJsonIndented children   lt  pre gt       lt  div gt      Then you can easily use it    const Demo    props    gt               return  lt JSONDisplayer gt  someObj  lt JSONDisplayer gt

[javascript] Pretty Printing JSON with React

Examples related to javascript

Examples related to json

Examples related to reactjs

Examples related to flux