export class DirectorView extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { director, movies } = this.props;
    console.log(movies); // works, all movies are logged
    console.log(director); // works, director is logged

    if (!director) return null;
    const directorMovies = movies.filter(m => m.director.name == director);
    console.log(directorMovies); // works, all movies of director are logged
    console.log(directorMovies[0]) // works, the first movie of the array is displayed
    // following do not work! All TypeError: Cannot read property 'director' of undefined
    //console.log(directorMovies[0]['director'].title)
    //console.log(directorMovies[0].director.title)
    //console.log(directorMovies[0][director][name])

    return (
      <Card bg="light" style={{ width: '90%' }}>
        <Card.Body>
          <Card.Title>{director}</Card.Title>
          <Card.Title>name: {director.name}</Card.Title>