Jhead45
4/25/2018 - 2:06 AM

React.js - component examples

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;