MovieInfo component

MovieInfo.js

import React, { Component } from 'react';

import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';


export class MovieInfo extends Component {
    constructor(props){
        super(props)
        this.state = {
            movieDetails: {},
            loading: true
        }
    }


    componentDidMount(){
      /* This is wrong because you aren't passing any id prop so you can't get id from this.props.id 
        let id = this.props.id; 
        */
        /* Now there are two ways to pass the id prop, first either you can pass the id via state in your Link in MovieHome.js
        and then can fetch that prop like this 
        const {id} = props.location.state
        or secondly, you could simply get that id from your location pathname, I have chosen the second option here, you
        can try the first one too */
        let id = this.props.location.pathname.split('/')[2]; 
        /* Ex: '/movieinfo/4' to extract 4 I have used '/' as separator so my string would split into ['',movieinfo,4] 
        and 4 is at index 2 so, [2] */
        

        fetch(`http://api.tvmaze.com/shows/${id}?embed=cast`)
        .then((response) => response.json())
        .then((details) => {
            this.setState({
                movieDetails: details,
                loading: false
            });
        })
    }

    render() {
        return (
            <div>
                <Container>
                    {this.state.loading ? (
                    <div>Loading...</div>
                    ) : (
                    <div>
                        <div>
                            <Card>
                                <CardMedia
                                    style={{height:400}}
                                    component="img" 
                                    image={this.state.movieDetails.image} // This won't work because your image is inside the medium key, so change it to {this.state.movieDetails.image.medium}
                                />
                                <CardContent>
                                    <Typography component="h1">
                                       {this.state.movieDetails.name}
                                    </Typography>
                                    <Typography component="h3">
                                        Year: {this.state.movieDetails.premiered}
                                    </Typography >
                                    <Typography component="h3">
                                        Rating: {this.state.movieDetails.rating} // This won't work too, change it to {this.state.movieDetails.rating.average}
                                    </Typography>
                                    <Typography component="h3">
                                        Genre: {this.state.movieDetails.genres}
                                    </Typography>
                                </CardContent>
                                <CardActions>
                                </CardActions>
                            </Card>
                        </div>
                        <br/>

                        <div>
                            <h2>Summary</h2>
                            {this.state.movieDetails.summary}
                        </div>

                        <div>
                             {this.state.movieDetails.episodes}
                        </div>

                        <div>
                            <h3>Cast</h3>
                            {this.state.movieDetails.cast} // This won't work, try to get that key from the response and replace it and it will be array so you have to loop through it to get all the elements.
                        </div>
                    </div>)}
                </Container>
            </div>
        )
    }
}

export default MovieInfo

Okay. In line 30, should I change [2] to [id]?

For line 91 the key from http://api.tvmaze.com/shows/1?embed=cast is 'name' which is inside an object PERSON which is inside an array CAST which finally is an object item of "_embedded", It is arranged like this...

"_embedded":{"cast":[{"person":{"id":1,"url":"http://www.tvmaze.com/people/1/mike-vogel","name":"Mike Vogel","country":{"name":"United States","code":"US","timezone":"America/New_York"},"birthday":"1979-07-17","deathday":null,"gender":"Male","image":{"medium":"http://static.tvmaze.com/uploads/images/medium_portrait/0/1815.jpg","original":"http://static.tvmaze.com/uploads/images/original_untouched/0/1815.jpg"},

I tried mapping through like this... movieDetails.cast.person.map( ) but got an error. How can I can do it? I have attached a screenshot.

Lastly I published the app following the steps in the link you sent me, but it shows a blank page on clicking the link https://pjmantoss.github.io/movies_db/
Please how can I fix it?

Thank you.