将无状态转换为类组件React JS

Question

I have a component here that fills up a data for movies:

const MovieList = (props) => {

const movieItems = props.movies.map((movie) => {
  return <MovieListItem key={movie._id} movie={movie} />
});

  return(
    <div className="container">
    <h2 className="latest">MOVIE RESULTS</h2>
    <div className="row">
      { movieItems }
    </div>
    </div>
  );
};

Basically, I was planning to convert my next component where I am filling up my movieItems to a class component. This class has some helpers function along with a new function onClickImgMoreBtn 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.

Here's my original stateless function:

import React from 'react';
const helper = require('../../helpers/helper_movies')

const MovieListItem = ({movie}) => {
  return (
<div>
                {helper.mappingComma(movie.genre)}
                {helper.getExcerpt(movie.overview)}
            <button className="btn btn-secondary float-right btn-sm" href={movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
</div>
);



};

export default MovieListItem;

And here's how i change it along with the new function:

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 (
<div>
              {helper.mappingComma(this.props.genre)}
              {helper.getExcerpt(this.props.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={this.props._id} onClick={this.onClickImgMoreBtn}>MORE</button>
</div>
);

}

}

export default MovieListItem;

Any idea what am i missing? did i properly converted it?

Answer 1

In your stateless component you destructure movie from the props and use movie.genre, movie._id and movie.overview and hence in the component you need to use this.props.movie.genre , this.props.movie._id and this.props.movie.overview

render(){
  return (
         <div>
              {helper.mappingComma(this.props.movie.genre)}
              {helper.getExcerpt(this.props.movie.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={this.props.movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
        </div>
   );
}

or better, destructure movie form props in render

render(){
  const { movie } = this.props;
  return (
         <div>
              {helper.mappingComma(movie.genre)}
              {helper.getExcerpt(movie.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
        </div>
   );
}

Also since you are not doing anything in the constructor, you need to have the constructor defined.