Binding data from a promise to a react component is inaccessible - reactjs

Question

I have two classes, one being a child component called article. I want to pass data to the article component after receiving data in the parent, which is my app.js. However, I am unable to drill down into the data from the response that I am setting in the App constructor--the data I am trying to access is undefined, but I am able to print the full response out fine, including the data that I am unable to drill down into. I would like to tie the articles array from the following JSON to my respective article components.
Data is being pulled from: https://newsapi.org/v2/top-headlines?sources=google-news&apiKey=edd0276dc8344c2abaeb40a3f6fb439f
class Article extends Component {
constructor(props) {
super(props);
this.props.title = props.title;
this.props.description = props.description;
this.props.url = props.url;
}
render() {
let pic = {
uri: 'https://cdn.vox-cdn.com/thumbor/M8Nb8mKymSEN59T2iDIe5XXiNTw=/0x146:2040x1214/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/11738447/VRG_ILLO_2761_Spacecraft_Sidebyside.jpg'
};
return (
<View style={styles.article}>
<Header/>
<Text>Two rockets launched within 15 minutes of each other Wednesday morning</Text>
<Image source={pic} style={{ height: 250}}/>
<Text numberOfLines={3}>Early in the morning on July 24th, rocket enthusiasts will have the lucky experience of being able to watch two launches at roughly the same time. Around 7:30AM ET, SpaceX is slated to launch one of its Falcon 9 rockets from the California coast, while Europe…</Text>
</View>
);
}
}
export default class App extends Component {
constructor(props) {
super(props);
let url = 'https://newsapi.org/v2/top-headlines?sources=google-news&apiKey=edd0276dc8344c2abaeb40a3f6fb439f';
this.state = fetch(url)
.then(function(response) {
response.text().then(function(text) {
console.log(text, "TEXT!!!");
return text;
});
});
}
render() {
return (
<ScrollView>
<Article/>
</ScrollView>
);
}
}

Answer 1

You shouldn't really be doing your fetch in the constructor.
Here's a working example to get you started:
import React from "react";
import ReactDOM from "react-dom";
const Article = ({ title, desc, url }) => {
return (
<React.Fragment>
<h1>{title}</h1>
<p>{desc}</p>
<img src={url} />
</React.Fragment>
);
};
let url =
"https://newsapi.org/v2/top-headlines?sources=google-news&apiKey=edd0276dc8344c2abaeb40a3f6fb439f";
class App extends React.Component {
state = {
articles: []
};
componentDidMount() {
fetch(url)
.then(res => res.json())
.then(data => {
this.setState({
articles: data.articles
});
});
}
render() {
if (this.state.articles.length === 0) {
return "Loading..";
}
const firstArticle = this.state.articles[0];
const { title, description, url } = firstArticle;
return <Article title={title} desc={description} url={url} />;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Working CodeSandbox here.

Answer 2

A couple things wrong about this:
the return type of a Promise<T> is a Promise<T> unless you await, in which case it's T.
you don't assign to this.state, state changes in React are abstracted away via this.setState
Following,
this.state = fetch(url)...
should be changed to
fetch(url)
.then(response => response.text())
.then(text => this.setState({ text }))
pass in this.state.text (or rename it) as props to the child
edit: as Colin pointed out in the comments below, assigning to this.state is fine in the constructor (which you are doing). However, fetching data is better suited for post-mount lifecycle methods like componentDidMount