Changing multiple props const to class

Question

I want to convert functional component in React to class based component, because I want to make use of state property. Currently I have this component which has 2 props.

const VideoListItem = ({video, onVideoSelect}) => {

    const imageUrl=video.snippet.thumbnails.default.url;
    return (
        <li onClick={() => onVideoSelect(video)} className="list-group-item">
            <div className="video-list media">

                <div className="media-left">
                    <img className="media-object" src={imageUrl} />
                </div>

                <div className="media-body">
                    <div className="media-heading">{video.snippet.title}</div>  
                </div>

           </div>
        </li>
    )
}

I tried to convert it to class and ended up with this:

class VideoListItem extends React.Component {

    render() {
    const {video} = this.props.video
    const imageUrl=video.snippet.thumbnails.default.url;
    const{onVideoSelect} =this.props.onVideoSelect
    return (
        <li onClick={() => onVideoSelect(video)} className="list-group-item">
            <div className="video-list media">

                <div className="media-left">
                    <img className="media-object" src={imageUrl} />
                </div>

                <div className="media-body">
                    <div className="media-heading">{video.snippet.title}</div>  
                </div>
           </div>
        </li>
    )
    }
}

However It does not work, I get errors. I guess it has something to do with 2 props being in the component. Anyone has idea how can I change the first code to be a class component?

Answer 1

Your destructuring is a bit off:

const { video } = this.props.video;
const{ onVideoSelect } = this.props.onVideoSelect;

should be something like:

const { video } = this.props;
const{ onVideoSelect } = this.props;

and you can combine these if you want:

const { video, onVideoSelect } = this.props;