CODEWITHSUNDEEP
javascriptreactjs
ajmajmajma
ajmajmajma

Reputation: 14216

How to print an object on page?

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?

Upvotes: 50

Views: 77763

Answers (2)

Damien
Damien

Reputation: 633

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>
)

Upvotes: 17

noveyak
noveyak

Reputation: 3300

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'));

Upvotes: 69

Related Questions