title: Display key and value pair from json In react js
body: <p>I am trying to display key and value from a json object.
  here is the code i m using</p>
  
  <pre><code>var FirebaseItem = React.createClass({
    render: function() {
      var v=[];var k=[];
      var foo;
        for(var key in this.props.data){
          v.push(this.props.data[key]);
          k.push(key);
  
        }
         foo= function(){
            return &lt;p&gt;{k} : {v}&lt;/p&gt;;
          }();
      return (
             &lt;div className="Data-item"&gt;{foo}&lt;/div&gt;
      );
    }
  });
  
  var FirebaseList = React.createClass({
    render: function() {
      var FirebaseData = this.props.data.map(function (obj) {
        return (
             &lt;FirebaseItem data = {obj}/&gt;
        );
      });
      return (
             &lt;div className="Datalist"&gt;
          {FirebaseData}
        &lt;/div&gt;  
      );
    }
  });
  
  
  var Firebase = React.createClass({
    render: function() {
      var FirebaseData=this.props.data;
  
      return (
  &lt;FirebaseList data={FirebaseData}/&gt;
  
      );
    }
  })
  var JsonData = [
    {author: "Pete Hunt", text: "This is one comment"},
    {author: "Jordan Walke", text: "This is *another* comment"},
    {author: "jone doe", text: "This is one comment"}
  ];
  React.render(
  
    &lt;Firebase data={JsonData} /&gt;,
    document.getElementById('Datawrap')
  );
  </code></pre>
  
  <p>Here i am getting response like </p>
  
  <p>authortext : Pete HuntThis is one comment</p>
  
  <p>authortext : Jordan WalkeThis is <em>another</em> comment</p>
  
  <p>authortext : jone doeThis is one comment</p>
  
  <p>Thanks in advance </p>