title: How to increment/decrement the likes and dislikes of the button in javascript?
body: <blockquote>
    <p>i want to achieve increase number in likes and decrease number in
    dislikes.
    i have implemented the setState
     <a href="https://i.stack.imgur.com/toRWi.png" rel="nofollow noreferrer">enter image description here</a></p>
  </blockquote>
  
  <pre><code>    import React, { Component } from 'react';
          import { Row, Col, Card, CardHeader, CardBody, CardSubtitle, Button } from 'reactstrap';
          import index from './index.css'
  
          class MovieList extends Component {
            constructor(props) {
              super(props);
            }
            state ={
                count:0
            }
  
            incrementMe = () =&gt; {
              let newCount = this.state.count + 1
              this.setState({
                count: newCount
              })
            }
            decrementMe = () =&gt; {
              let newCount = this.state.count - 1
              this.setState({
                count: newCount
              })
            }
  
            render () {
              let { id, title, category, likes} = this.props.movie;
              return (
                &lt;div&gt;
                &lt;Row&gt;
                  &lt;Col&gt;
                  &lt;Card&gt;
                      &lt;CardHeader&gt;&lt;strong&gt;{title}&lt;/strong&gt;&lt;/CardHeader&gt;
                     &lt;CardBody&gt;
                      &lt;CardSubtitle&gt;{category}&lt;/CardSubtitle&gt;
                      &lt;Button&gt; : {this.state.count}&lt;/Button&gt; &amp;nbsp;
                      &lt;Button&gt; : {this.state.count}&lt;/Button&gt;
                      &lt;br /&gt;
                      &lt;Button color="danger" onClick={() =&gt; this.props.removeMovie(id)}&gt;Delete&lt;/Button&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;/div&gt;
              )
            }
          }
  
          export default MovieList;
  </code></pre>
  
  <blockquote>
    <p>the image i attached is the output of the present code
    the following code is the movies list which i implemented into the
    cards</p>
  </blockquote>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, Row, Col } from 'reactstrap';
  import MovieList from './MovieList';
  
  class Main extends Component {
    constructor() {
      super();
      this.state = {
        movies: [
          {
          id: '1',
          title: 'Oceans 8',
          category: 'Comedy',
          likes: 4,
          dislikes: 1
        }, {
          id: '2',
          title: 'Midnight Sun',
          category: 'Comedy',
          likes: 2,
          dislikes: 0
        }, {
          id: '3',
          title: 'Les indestructibles 2',
          category: 'Animation',
          likes: 3,
          dislikes: 1
        }, {
          id: '4',
          title: 'Sans un bruit',
          category: 'Thriller',
          likes: 6,
          dislikes: 6
        }, {
          id: '5',
          title: 'Creed II',
          category: 'Drame',
          likes: 16,
          dislikes: 2
        }, {
          id: '6',
          title: 'Pulp Fiction',
          category: 'Thriller',
          likes: 11,
          dislikes: 3
        }, {
          id: '7',
          title: 'Pulp Fiction',
          category: 'Thriller',
          likes: 12333,
          dislikes: 32
        }, {
          id: '8',
          title: 'Seven',
          category: 'Thriller',
          likes: 2,
          dislikes: 1
        }, {
          id: '9',
          title: 'Inception',
          category: 'Thriller',
          likes: 2,
          dislikes: 1
        }, {
          id: '10',
          title: 'Gone Girl',
          category: 'Thriller',
          likes: 22,
          dislikes: 12
        }
        ]
      }
    }
    removeMovie(id) {
      this.setState({ movies: this.state.movies.filter(movie =&gt; movie.id !== id)});
    }
    render () {
      let MovieLists = this.state.movies.map(movie =&gt; {
        return (
          &lt;Col md="4"&gt;
            &lt;MovieList key={movie.id} removeMovie={this.removeMovie.bind(this)} movie={movie} /&gt;
          &lt;/Col&gt;
  
        )
      })
      return (
        &lt;Container fluid&gt;
          &lt;Row&gt;
            {MovieLists}
          &lt;/Row&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default Main;
  </code></pre>
  
  <blockquote>
    <p>Please try to help me with the increase in likes and decrease in
    dislikes(number with existing likes and dislikes)</p>
  </blockquote>