React.js this.props.data.map() is not a function

Question

I\'m messing around with react and trying to parse and render a json object. Right now, I\'m just setting it with a hard-coded object for testing and not getting it from an

Answer 1

It appears that your data is not a json object, it is a string. You probably need to run data = JSON.parse(data); to convert your data into an actual javascript object to be able to use it. An easy test for this would be to run

<script>
  var data = "[" + '<%=data%>' + "]";
  console.log(data);
  console.log(JSON.parse(data));
</script>

You should notice the difference.

Answer 2

You are passing result of console.log as first parameter to React.render:

React.render(
 console.log("inside render"),
 <PersonDiv data={data} />,
document.getElementById('jsonData')
);

It should be like:

console.log("will render");
React.render(
     <PersonDiv data={data} />,
    document.getElementById('jsonData')
);