title: Converting stateless to a class component react js
body: <p>I have a component here that fills up a data for movies:</p>
  
  <pre><code>const MovieList = (props) =&gt; {
  
  const movieItems = props.movies.map((movie) =&gt; {
    return &lt;MovieListItem key={movie._id} movie={movie} /&gt;
  });
  
    return(
      &lt;div className="container"&gt;
      &lt;h2 className="latest"&gt;MOVIE RESULTS&lt;/h2&gt;
      &lt;div className="row"&gt;
        { movieItems }
      &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Basically, I was planning to convert my next component where I am filling up my <code>movieItems</code> to a class component. This class has some helpers function along with a new function <code>onClickImgMoreBtn</code> whenever it was click it must console log something. But it doesnt work any more when I tried to convert it class component. Even my helper classes wont work either.</p>
  
  <p>Here's my original stateless function:</p>
  
  <pre><code>import React from 'react';
  const helper = require('../../helpers/helper_movies')
  
  const MovieListItem = ({movie}) =&gt; {
    return (
  &lt;div&gt;
                  {helper.mappingComma(movie.genre)}
                  {helper.getExcerpt(movie.overview)}
              &lt;button className="btn btn-secondary float-right btn-sm" href={movie._id} onClick={this.onClickImgMoreBtn}&gt;MORE&lt;/button&gt;
  &lt;/div&gt;
  );
  
  
  
  };
  
  export default MovieListItem;
  </code></pre>
  
  <p>And here's how i change it along with the new function:</p>
  
  <pre><code>import React, { Component } from 'react';
  const helper = require('../../helpers/helper_movies');
  
  class MovieListItem extends Component{
    constructor(props){
        super(props);
    }
  
    onClickImgMoreBtn(){
      console.log('hi there!');
     }
  
    render(){
    return (
  &lt;div&gt;
                {helper.mappingComma(this.props.genre)}
                {helper.getExcerpt(this.props.overview)}
  
              &lt;button className="btn btn-secondary float-right btn-sm" href={this.props._id} onClick={this.onClickImgMoreBtn}&gt;MORE&lt;/button&gt;
  &lt;/div&gt;
  );
  
  }
  
  }
  
  export default MovieListItem;
  </code></pre>
  
  <p>Any idea what am i missing? did i properly converted it?</p>