Uncaught ReferenceError: data is not defined in react
<p>I'm learning react from <a href="https://www.packtpub.com/web-development/reactjs-example-building-modern-web-applications-react" rel="nofollow">this book</a> but when I try to render this simple jason-based table data:</p>

<pre><code>&lt;!-- index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;React Tutorial&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="content"&gt;&lt;/div&gt;



    &lt;script type="text/babel"&gt;





var App = React.createClass({    
render: function(){

var data = [
         { "when": "2 minutes ago", "who": "Jill Dupre",
        "description": "Created new account"
        },
        {
        "when": "1 hour ago",
        "who": "Lose White",
        "description": "Added fist chapter"
        },
        {
        "when": "2 hours ago",
        "who": "Jordan Whash",
        "description": "Created new account"
        }];

var headings = ['When', 'Who', 'Description']



var headings = this.props.headings.map(function(heading) {
return(&lt;th&gt;
{heading}
&lt;/th&gt;);
});

var rows = this.props.data.map(function(change) {
return(&lt;tr&gt;
&lt;td&gt; {change.when} &lt;/td&gt;
&lt;td&gt; {change.who} &lt;/td&gt;
&lt;td&gt; {change.description} &lt;/td&gt;
&lt;/tr&gt;);
});
return(&lt;table&gt;
{headings}
{rows}
&lt;/table&gt;);
}
});

ReactDOM.render(

  &lt;App headings = {headings} data = {data} /&gt;,
  document.getElementById('content')
);

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I get </p>

<pre><code>Uncaught ReferenceError: data is not defined
</code></pre>

<p>Admitedly this because I don't know where exacltly should put the data but the book is vague about this. I tried putting the data elsewhere in the script but still got errors. So appreciate your help.</p>