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

Solution 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.

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