React: Like button counter

1

Hi there, I’m stuck with an exercise. I’d like to create a Like counter but my handleLikeCount() doesn’t work.

Here is my movies component containing the handleLikeCount() :

import React, { Component } from ‘react’;

import { getMovies } from ‘…/services/fakeMovieService’;

class Movies extends Component {

state = { 

    movies: getMovies(),

 };



 handleDelete = movie => {

    const movies = this.state.movies.filter(m => m._id !== movie._id);

    this.setState({ movies })

 };

 handleLikeCount = (movie) => {

    const movies = [... this.state.movies];

    const index = movies.indexOf(movie);

    movies[index] = {...movie};

    movies[index].movieJaime++;

    this.setState({ movies })

    console.log(this.state.movies);

 };

render() { 

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

    

    if(count === 0) return <p>There is no movie in the database</p>;

    return ( 

        <React.Fragment>

                <p>There are { count } movies in the database</p>

                <table className="table">

                    <thead>

                        <tr>

                            <th>Name</th>

                            <th>Genre</th>

                            <th>Stock</th>

                            <th>Rate</th>

                            <th></th>

                            <th></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>

                                    <button

                                        className="btn btn-danger btn-sm"

                                        onClick={() => this.handleDelete(movie)}>Delete</button>

                                </td>

                                <td>

                                    <button

                                    className="btn btn-primary"

                                    onClick={() => this.handleLikeCount(movie)}>

                                    Like

                                     <span className="badge badge-light">

                                         {movie.LikeCount}

                                    </span>

                                    </button>

                                </td>

                        </tr>

                        ))}

                    </tbody>

                </table>

        </React.Fragment>

     );

}

}

export default Movies;

Thanks for any help :slight_smile:

2

In handleLikeCount you name the counter movieJaime; while you render a counter named LikeCount.

3

Thanks for your answer, unfortunately it doesn’t fix my problem ;(

Here is the other component, fakeMovieService which provides data for the Movies component:

import * as genresAPI from “./fakeGenreService”;

const movies = [

{

_id: "5b21ca3eeb7f6fbccd471815",

title: "Terminator",

genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },

numberInStock: 6,

dailyRentalRate: 2.5,

publishDate: "2018-01-03T19:04:28.809Z",

liked: true,

LikeCount: 0,

},

{

_id: "5b21ca3eeb7f6fbccd471816",

title: "Die Hard",

genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },

numberInStock: 5,

dailyRentalRate: 2.5,

LikeCount: 0,

},

];

export function getMovies() {

return movies;

}

export function getMovie(id) {

return movies.find((m) => m._id === id);

}

4

I finally found my error :slight_smile:

5

Will you share the answer?

6

Sure, here is the code:

import React, { Component } from ‘react’;

import { getMovies } from ‘…/services/fakeMovieService’;

class Movies extends Component {

state = { 

    movies: getMovies(),

 };



 handleDelete = movie => {

    const movies = this.state.movies.filter(m => m._id !== movie._id);

    this.setState({ movies })

 };

 handleLikeCount = (movie) => {

    const movies = [... this.state.movies];

    const index = movies.indexOf(movie);

    movies[index] = {...movie};

    movies[index].likeCount++;

    this.setState({ movies })

    console.log(this.state.movies);

 };

render() { 

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

    

    if(count === 0) return <p>There is no movie in the database</p>;

    return ( 

        <React.Fragment>

                <p>There are { count } movies in the database</p>

                <table className="table">

                    <thead>

                        <tr>

                            <th>Name</th>

                            <th>Genre</th>

                            <th>Stock</th>

                            <th>Rate</th>

                            <th></th>

                            <th></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>

                                    <button

                                        className="btn btn-danger btn-sm"

                                        onClick={() => this.handleDelete(movie)}>Delete</button>

                                </td>

                                <td>

                                    <button

                                    className="btn btn-primary"

                                    onClick={() => this.handleLikeCount(movie)}>

                                    Like

                                     <span className="badge badge-light">

                                         {movie.likeCount}

                                    </span>

                                    </button>

                                </td>

                        </tr>

                        ))}

                    </tbody>

                </table>

        </React.Fragment>

     );

}

}

export default Movies;

7

When we want to update the state using this.setState the this keyword refers to the Counter class(Object) which has all the methods and properties available in the Component class?