React output JSON from API - json

Question

I have managed to get JSON from my api I have created, however I am having trouble actually rendering that JSON. I have managed to output it in the console by 'stringify'-ing it, however I cannot seem to actually render JSON to the page.
import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
function getData() {
return $.ajax({
type: "GET",
url: 'http://localhost:3001/data',
data: {},
xhrFields: {
withCredentials: false
},
crossDomain: true,
dataType: 'json',
success: handleData
});
}
function handleData(data /* , textStatus, jqXHR */ ) {
console.log(JSON.stringify(data));
return JSON.stringify(data);
}
class App extends Component {
render() {
return (
<div className="App">
<header>
<h2>Last Application Deployment </h2>
</header>
<div id='renderhere'>
{JSON.stringify(getData().done(handleData))}
</div>
</div>
);
}
}
export default App;

Answer 1

you cant execute a function in render method in return.you can use react lifecycles and store result in state like this =>
class App extends Component {
state = {result : null}
componentDidMount = ()=>{
$.ajax({
type: "GET",
url: 'http://localhost:3001/data',
data: {},
xhrFields: {
withCredentials: false
},
crossDomain: true,
dataType: 'json',
success: (result)=>{
this.setState({result : result});
}
});
};
render() {
return (
<div className="App">
<header>
<h2>Last Application Deployment </h2>
</header>
<div id='renderhere'>
{this.state.result && and what you want because i dont know why you want use JSON.stringfy - you use .map() or ...}
</div>
</div>
);
}
}
I suggest you see this article and this.

Answer 2

I've made a demo of how you can solve this: http://codepen.io/PiotrBerebecki/pen/amLxAw. The AJAX request should not be made in the render method but in a componentDidMount() lifecycle method. Also, it's best to store the response in state. Please see the guidance in the React docs: https://facebook.github.io/react/tips/initial-ajax.html
Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.
Here is the full code:
class App extends React.Component {
constructor() {
super();
this.state = {
time: '',
string: ''
};
}
componentDidMount() {
$.ajax({
type: "GET",
url: 'http://date.jsontest.com/'
})
.then(response => {
this.setState({
time: response.time,
string: JSON.stringify(response)
});
})
}
render() {
return (
<div className="App">
<header>
<h2>Last Application Deployment </h2>
</header>
<div id='renderhere'>
Time: {this.state.time} <br /><br />
String: {this.state.string}
</div>
</div>
);
}
}
ReactDOM.render(
<App />, document.getElementById('content')
);