How do you render from an api in React? - reactjs

Question

I have successfully changed the state using NASA's api.
Now I would like to display title, image and explanation from the api. I'm a beginner so go easy on me!
I have tried searching and trying different code to no prevail. Wondered if someone on here could shine light on what I have been doing wrong.
this.state = {
picture: "",
date: ""
};
componentDidMount(){
fetch(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`)
.then(response => response.json())
.then(json => this.setState({ picture: json }));
};
render(){
return (
<div className="container">
<h1>NASA Picture of the Day</h1>
<form onSubmit={this.handleSubmit}>
(YYYY-MM-DD):
<input
type="text"
id="date"
placeholder="input date"
value={this.state.date}
onChange={this.handleChange}
/>
<button type="submit" disabled={!this.state.date}>
Submit
</button>
</form>
</div>
);
};

Answer 1

Currently a sample response from NASA API is as below: ( NOt sure if it changes in future)
{
"date": "2019-08-04",
"explanation": "Twenty-one years ago results were first presented indicating that most of the energy in our universe is not in stars or galaxies but is tied to space itself. In the language of cosmologists, a large cosmological constant -- dark energy -- was directly implied by new distant supernova observations. Suggestions of a cosmological constant were not new -- they have existed since the advent of modern relativistic cosmology. Such claims were not usually popular with astronomers, though, because dark energy was so unlike known universe components, because dark energy's abundance appeared limited by other observations, and because less-strange cosmologies without a signficant amount of dark energy had previously done well in explaining the data. What was exceptional here was the seemingly direct and reliable method of the observations and the good reputations of the scientists conducting the investigations. Over the two decades, independent teams of astronomers have continued to accumulate data that appears to confirm the existence of dark energy and the unsettling result of a presently accelerating universe. In 2011, the team leaders were awarded the Nobel Prize in Physics for their work. The featured picture of a supernova that occurred in 1994 on the outskirts of a spiral galaxy was taken by one of these collaborations. News: APOD is now available via Facebook in Hindi.",
"hdurl": "https://apod.nasa.gov/apod/image/1908/SN1994D_Hubble_2608.jpg",
"media_type": "image",
"service_version": "v1",
"title": "Rumors of a Dark Universe",
"url": "https://apod.nasa.gov/apod/image/1908/SN1994D_Hubble_960.jpg"
}
To display some information from NASA in the same component (Assuming you want to display details before your submit button click)
let picture = this.state.picture;
return (
<div className="container">
<h1>NASA Picture of the Day</h1>
<h2>{picture.title}</h2>
<img src={picture.url} alt={picture.title}></img>
<p>{picture.explanation}</p>
___________ YOUR FORM INPUT CONTROLS _____________
</div>
);

Answer 2

You're not using this.state.picture anywhere. Simply use whatever data is there to render your image.
I'm not sure what format the data is in but assuming the API returns JSON like:
{ "url": "http://nasa.gov/path/to/image.png" }
Then you just need this somewhere:
{ this.state.picture && <img src={this.state.picture.url} /> }

Answer 3

As you stored data in picture , write this in render
return (<ul>this.pictureToDisplay()</ul>)
pictureToDisplay definition :- (Assuming this to be an array of pictures)
return (this.state.picture.map(item=><li>item</li>))

Answer 4

You can do it this way. Just use a different component for the api data and render it conditionally.
this.state = {
picture: "",
date: ""
};
componentDidMount(){
fetch(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`)
.then(response => response.json())
.then(json => this.setState({ picture: json }));
};
render(){
let picture_data = this.state.picture;
return (
<div className="container">
<h1>NASA Picture of the Day</h1>
<form onSubmit={this.handleSubmit}>
(YYYY-MM-DD):
<input
type="text"
id="date"
placeholder="input date"
value={this.state.date}
onChange={this.handleChange}
/>
<button type="submit" disabled={!this.state.date}>
Submit
</button>
</form>
{picture !== "" ? <DataComponent picture={picture} />:<div/>}
</div>
);
};
Your Child Component for showing the Nasa's data. Change your Json from api accordingly I used some random keys.
import React, { Component } from 'react';
class DataComponent extends Component {
render() {
let picture = this.props.picture;
return ( <div>
<h1>{picture.someHeading}</h1>
<img src={picture.someURL}></img>
<p>{picture.someDecription}</p>
</div> );
}
}
export default DataComponent;