React.js issues json, co fetch or axios response
I have been pulling my hair out for too long and I can no longer concentrate.
I am trying to take json from a url and just render it visually in the browser. It doesn't even need to be formatted, at least it doesn't happen until I overcome this obstacle.
I can get it to show up in the console via console.log, but I can't get the response in the render method. I have simplified it down to the code below until I see something on the page.
import React, { Component } from 'react';
// import axios from 'axios';
var co = require('co');
co(function *() {
var res = yield fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow');
var json = yield res.json();
console.log(res);
});
class App extends Component {
render() {
return (
<div className="App">
INSERT JSON HERE
</div>
);
}
}
export default App;
I also got the answer with
fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
.then(function(res) {
return res.json();
}).then(function(json) {
console.log(json);
});
I originally started using axioms because I thought, "Oh, I'm going to use axioms because someone is awesome? I'm awesome."
axios.get('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
.then(function(response) {
console.log(response.data);
});
but that was wrong because today I am not amazing.
I will take any help I can get! My initial plans also included using the map to simply iterate over "items", so extra points if you can guide me closer to rescuing in this area.
source to share
import React, { Component } from "react";
import axios from "axios";
const URL = "https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
items: []
}
}
componentDidMount() {
var _this = this;
axios.get(URL)
.then(function(res){
_this.setState({
items: res.data.items
});
})
.catch(function(e) {
console.log("ERROR ", e);
})
}
render() {
const renderItems = this.state.items.map(function(item, i) {
return <li key={i}>{item.title}</li>
});
return (
<ul className="App">
{renderItems}
</ul>
);
}
}
source to share
You can accomplish this through React component state and lifecycle.
Read about it here: React State / Lifecycle
You can place the call to Fetch in the component's ComponentDidMount function, and the callback set the state to view.
If you want to use Fetch, your component might look like this:
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: false
};
this.receiveData = this.receiveData.bind(this);
}
componentDidMount() {
var _self = this;
fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow')
.then(function(res) {
return res.json();
}).then(function(json) {
console.log(json);
_self.receiveData(json);
});
}
receiveData(data) {
this.setState({data});
}
render() {
return <div>{this.state.data}</div>
}
}
source to share