[Solved]Cannot read property 'liked' of undefined

React
1

Hi All!

I’m currently following Mosh on Composing Components video 22- Solution- Like Component. And I’m stuck on making the handleLike function to work.

I followed his codes step by step, but I keep on getting the error:

Cannot read property ‘liked’ of undefined

Thank you all in advance!

Here’s my code for movies.jsx:

import React, { Component } from "react";
import Like from "./common/like";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
  state = {
    movies: getMovies(),
    like: {
      heart: <i class="fa fa-heart-o"></i>,
      heartless: <i class="fa fa-heart"></i>
    }
  };

  handleDelete = (movie) => {
    const movies = this.state.movies.filter((m) => m._id !== movie._id);
    this.setState({ movies });
  };

  handleLike = (movie) => {
    const movies = [...this.state.movies];
    const index = movies.indexOf(movie);
    movies[index] = { ...movies[index] };
    movies[index].liked = !movie[index].liked;
    this.setState({ movies });
  };

  render() {
    const { length: count } = this.state.movies;

    if (count === 0) return <p>There are no movies in the database.</p>;

    return (
      <React.Fragment>
        <p>Showing {this.state.movies.length} in the database.</p>
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Genre</th>
              <th>Stock</th>
              <th>Rate</th>
            </tr>
          </thead>
          <tbody>
            {this.state.movies.map((movie) => (
              <tr key={movie._id}>
                <td>{movie.title}</td>
                <td>{movie.genre.name}</td>
                <td>{movie.numberInStock}</td>
                <td>{movie.dailyRentalRate}</td>
                <td>
                  <Like
                    liked={movie.liked}
                    onClick={() => this.handleLike(movie)}
                  />
                </td>

                <td>
                  <button
                    onClick={() => this.handleDelete(movie)}
                    className="btn btn-danger btn-sm"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </React.Fragment>
    );
  }
}

export default Movies;

Heres my code for like.jsx:

import React, { Component } from "react";

class Like extends Component {
  render() {
    let classes = "fa fa-heart";
    if (!this.props.liked) classes += "-o";
    return (
      <i
        onClick={this.props.onClick}
        className={classes}
        style={{ cursor: "pointer" }}
        aria-hidden="true"
      ></i>
    );
  }
}

export default Like;
2

Okay sorry! after hours of staring in between those lines I have made a silly little typo.

Incorrect:
`movies[index].liked = !movie[index].liked;

Correct:
movies[index].liked = !movies[index].liked;

3

BTW: Why do you have a like object with JSX in the state of your Movies component?

4

Hey Sam,

At first I tried to give it a go without following Mosh’s solution. I meant to remove that line of codes just forgot about it. :sweat_smile: