[Solved]Cannot read property 'liked' of undefined

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 (
        <p>Showing {this.state.movies.length} in the database.</p>
        <table className="table">
            {this.state.movies.map((movie) => (
              <tr key={movie._id}>
                    onClick={() => this.handleLike(movie)}

                    onClick={() => this.handleDelete(movie)}
                    className="btn btn-danger btn-sm"

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 (
        style={{ cursor: "pointer" }}

export default Like;

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

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

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

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

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: