How to map through a responses from an API in react - reactjs

Question

I did fetch data from the NYTimes API and console log the response in the browser. I have done this by writing a function do_search. How can I send the responses as a prop to another component?
Here is a response form the API.
Here is my code for INDEX.JS. Please notice that I want to pass the prop in Listview component which is at 6th line from the last.
import React from "react";
import ReactDOM from "react-dom";
import SearchComponent from "./components/Search_component";
import ListViewComponent from "./components/Listview_component";
import _ from "lodash";
const axios = require("axios");
const api_key = "my_api_key";
let url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
q: " "
};
this.do_search("Bangladesh");
this.do_search = this.do_search.bind(this);
}
do_search(keyword) {
axios
.get(
url, // takes the variable url
{
params: {
api_key: api_key,
q: keyword
}
}
)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
render() {
const search_throttle = _.debounce(keyword => {
this.do_search(keyword);
}, 500);
return (
<div>
<SearchComponent
searchkeyword={
search_throttle
}
/>
<ListViewComponent data={this.do_search.response.docs} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Assign the response to a state and pass this state as a prop.
this.state = {
q: " ",
searchResponse :null,
};
........
do_search = (keyword) =>{
axios
.get(...)
.then(function(response) {
console.log(response);
this.setState({searchResponse:response.data});
})
.........
<ListViewComponent data={this.state.searchResponse} />
</div>
Now when ever the state value gets its response from api, render is called again and listview gets the value.

Answer 2

Make an array where you will push response.data from then method in axios. Pass that array as prop to ListView component.
Inside ListView component make some loader that will show to the user that component is fetching data. When data arrives, show what you got from NYTimes API

Answer 3

Notice that when your state changes, views are re-rendered with props updated
import React from "react";
import ReactDOM from "react-dom";
import SearchComponent from "./components/Search_component";
import ListViewComponent from "./components/Listview_component";
import _ from "lodash";
const axios = require("axios");
const api_key = "9f4cd2e5a8884f3eb5853436e74be7e6";
let url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
q: " "
};
this.do_search("Bangladesh");
this.do_search = this.do_search.bind(this);
}
do_search(keyword) {
axios
.get(
url, // takes the variable url
{
params: {
api_key: api_key,
q: keyword
}
}
)
.then(function(response) {
console.log(response);
this.setState({ response }); // SET STATE HERE
})
.catch(function(error) {
console.log(error);
});
}
render() {
const search_throttle = _.debounce(keyword => {
this.do_search(keyword);
}, 500);
return (
<div>
<SearchComponent
searchkeyword={
search_throttle
}
/>
<ListViewComponent data={this.state.response} /> // GET STATE HERE
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));