MovieList

.js

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

export class MovieList extends Component {

  constructor(props) {
    super(props)

    this.state = {
      movies : []
    }
  }

  componentDidMount() {

    let movies = ["Lord of the Rings", "Taxi", "Margin Call"]

    this.setState({
      movies : movies
    })
  }

  render() {

    let movieItems = this.state.movies.map((movie,index) => {

      let newObj = {
        pathname : `/movies/${index}`,
        movie : {
          name : movie,
          movieId : index
        }

      }

      return (
        <li key = {index}><Link to={`/movies/${index}`}> {movie} </Link> </li>
      )
    })

    return (
      <ul>{movieItems}</ul>
    )
  }

}