Passing Data Object to another view - React

Question

I am building a Film grid that return their Id, thumbnail, title, episode number and released date. The onClick events of "Details" are already binded to the :id_film url.

How can I display the correct Film Object Values on each specific view e.g: all species.names?

CodeSandbox Demo & Api Documentation Swapi

DetailFilms.js Component:

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class DetailFilms extends Component {
  state = {
    film: null
  }
  componentDidMount() {
    let id = this.props.match.params.films_id;
    axios.get('https://swapi.co/api/films/' + id)
      .then(res => {
        this.setState({
          film: res.data
        })
        console.log(res)
      })
  }
  render() {
    const film = this.state.film ? (
      <div className="jumbotron">
        <h2 className="display-4">{this.state.film.title}</h2>
        <p className="lead">{this.state.film.director}</p>
        <hr className="my-4" />
        <p>{this.state.film.producer}</p>
        <p>Episode Nº: {this.state.film.episode_id}</p>
        <p className="font-italic">{this.state.film.opening_crawl}</p>
        <p>Species: {this.state.film.species}</p>
        <Link className="btn btn-primary btn-lg" to="/" role="button">Learn more</Link>
      </div>
    ) : (
      <div className="spinner-border" role="status">
        <span className="sr-only">Loading...</span>
      </div>
    )
    return (
      <div className="d-flex justify-content-center align-items-center ">
        {film}
      </div>
    )
  }
}

export default DetailFilms;

in your render you are calling this.state.films with an 's' when you set your state and make your get request you are using film. That is one issue — GifCo
– GifCo, Commented Feb 4, 2019 at 17:07
Friendly advice, I assume you are just learning react, so don't use componentWillMount for any API request componenentDidMount is a much better solution! — Mario Rozic
– Mario Rozic, Commented Feb 4, 2019 at 17:15
@mdiiorio I know, daveceddia.com/…, check this link, 2 min read! — Mario Rozic
– Mario Rozic, Commented Feb 4, 2019 at 18:42
@MarioRozic thanks fort that! I recently found that in DetailFilms.js I passed the wrong film data. You know how can i fix this? Thks! — mdiiorio
– mdiiorio, Commented Feb 4, 2019 at 23:25

GifCo · Accepted Answer · 2019-02-04 17:11:51Z

3

First your render method is calling

this.state.films

You want

this.state.film

Also in your get request you are setting this.state.film = res.data.results there is no "results" on this api. Remove it and just use:

this.setState({
    film: res.data
})

This works in your code sandbox.

answered Feb 4, 2019 at 17:11

GifCo

1,3728 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mdiiorio Over a year ago

Thks! but how can y acces to an array object value again like species names?

mdiiorio Over a year ago

@GifCo I recently found that in DetailFilms.js I passed the wrong film. You know how can i fix this? Thks!

GifCo Over a year ago

@modiiorio im not sure i follow? The best thing to do is console.log(res) in your axios.get calls. That way you can see the entire object in Chrome dev tools and see how it is structured. IF you mean you click on a move for more details and you get a different movies details, you must be passing the wrong movie ID in your URL params

Collectives™ on Stack Overflow

Passing Data Object to another view - React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related