Three files from covalence lab - demonstrate storing data in components from API.
import React, { Component } from "react";
import "isomorphic-fetch";
import "es6-promise";
class Feature extends Component {
constructor(props) {
super(props);
this.state = { films: [] };
}
componentDidMount() {
fetch("https://ghibliapi.herokuapp.com/films/" + this.props.match.params.id)
.then(result => result.json())
.then(films => {
this.setState({ films });
});
}
render() {
return (
<div className='d-flex justify-content-center mt-3'>
<table className="table table-bordered w-50 formColor tableBorder">
<thead>
<tr>
<th colSpan='2' className='text-center'><h2>{this.state.films.title}</h2></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Description</th>
<td>{this.state.films.description}</td>
</tr>
<tr>
<th scope="row">Director</th>
<td>{this.state.films.director}</td>
</tr>
<tr>
<th scope="row">Producer</th>
<td>{this.state.films.producer}</td>
</tr>
<tr>
<th scope="row">Release Date</th>
<td>{this.state.films.release_date}</td>
</tr>
<tr>
<th scope="row">Rating</th>
<td>{this.state.films.rt_score}</td>
</tr>
</tbody>
</table></div>
);
}
}
export default Feature;
import React from "react";
import { Link } from "react-router-dom";
const FilmsCard = (props) => {
console.log(props);
return (
<div className="d-flex justify-content-center mt-4">
<div className="card w-50 text-center">
<div className="card-body formColor cardBorder">
<h3 className="card-title formColor">{props.value.title}</h3>
<p className="card-text formColor">{props.value.description}</p>
<Link className="btn btn-primary" to={`/films/${props.value.id}`}>View Details</Link>
</div>
</div>
</div>
);
};
export default FilmsCard;
import React, { Component, Fragment } from "react";
import FilmsCard from "./filmsCard";
import "isomorphic-fetch";
import "es6-promise";
class Films extends Component {
constructor(props) {
super(props);
this.state = { films: [] };
}
componentDidMount() {
fetch("https://ghibliapi.herokuapp.com/films")
.then(result => result.json())
.then(films => {
this.setState({ films });
});
}
render() {
return (
<Fragment>
{this.state.films.map(films => <FilmsCard key={films.id} value={films} />)}
</Fragment>
);
}
}
export default Films;