How to print an object on page?

Question

I am have a big piece of data (list) stored in the state that I want to print out on my page in react.

I have tried -

<div>{JSON.stringify(myObject)}</div> 

and

<div>{myObject.toString()}</div> 

toString() does not work, but i thought i would give it a shot. I am unsure how to do this, I know if I was in angular I could store the object in a $scope variable, and just do {{myVar}} on the page to render the object. Is there any way to do this quickly in react?

Answer 1

I think your example should work. Not sure what kind of representation you are hoping for but I put an example on jsfiddle where I use JSON.stringify to print out an object.

https://jsfiddle.net/5yq9fev6/1/

var world = {     'abc' : [1, 2, 3],     'b': {         1: 'c'      } }  var Hello = React.createClass({     render: function() {         return (             <div>                         <div>{JSON.stringify(world)}</div>             </div>         )     } });  React.render(<Hello />, document.getElementById('container')); 

Answer 2

As a function component with JSON.stringify additional arguments for indentation

import React from 'react';  var person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" };  const StringifyObject = () => (   <pre>     {JSON.stringify(person, null, 2)}   </pre> )