Fetch django render argument in react js component

问题

I'm facing issues with passing the django render argument as a server response and fetch it using react component and then send it to html.

Below is the Django code :

def view_personal_details (request):
    personal_detail_json = personal_details.objects.all()
    personal_detail = serializers.serialize('json', personal_detail_json)
    return render (request, "webFiles/reactOutput.html", {'personal_detail': personal_detail})

Following is the react code, to fetch the 'personal_detail' sent via django response :

var categories = []; //{ "model": "buglockerApp.authentication_details", "pk": 1, "fields": { "userid": "001", "password": "rajiv@247", "sec_que": "Pet Name", "sec_ans": "Jerry" } }];

var App = _react2.default.createClass({
    displayName: 'App',

    getInitialState: function getInitialState() {
        return {
            data: null
        };
    },
    componentDidMount: function componentDidMount() {
        var self = this;
        //var http = require("http");
    var REQUEST_URL = "/viewPersonalDetails";
    // var request = http.get(REQUEST_URL, function (response) {
    //  console.log ("react response" + JSON.stringify(response));
    //  var buffer = "", 
    //         data;
    //     console.log("categories :" + JSON.stringify(categories));
    //  response.on("data", function (chunk) {
    //         buffer += chunk;
    //  }); 

    //  response.on("end", function (err) {
       //      self.setState({
       //          categories: buffer
       //      });
       //      console.log('buffer: ' + buffer);
    //      console.log('categories: ' + JSON.stringify(categories));
    //  }); 
    // });

    fetch(REQUEST_URL, {
          method: 'get',
          dataType: 'json',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
        .then((response) => 
          {
            return response.json() // << This is the problem
          })
        .then((responseData) => { // responseData = undefined

           return responseData;
         })
        .then((data) => { 

           console.log(data);
         });
    },
    render: function render() {
        return _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(_griddleReact2.default, { results: categories, tableClassName: 'table', showFilter: true, showSettings: true, columns: [] })
        );
    }
});

_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));

Below is the HTML Content to which the react component will render the output :

<!DOCTYPE html>
<html lang = "en">
    <head>
      <meta charset = "UTF-8">
      <title>React First App</title>
      {% load static  %}
    </head>
    <body>
      Django Direct Output: <br />
      {{ personal_detail }}
      ------------------------ <br />
      React Output: <br />
      <div id = "app"></div>
      <script src = "{% static 'js/reactResponseNoDefaultJson.js' %}"></script>
    </body>
</html>

The {{ personal_detail }} part (in above HTML content) gives the correct json value directly from Django, but the below part in html (i.e. app div and the javascript below) is not returning the content from react. reactResponseNoDefaultJson.js' is the minified react js.