Reference for React Training. Activity for refactor stateless component

ServiceCardBottom.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export class ServiceCardBottom extends Component {  // class that extends component
  constructor(props) {
    super(props);

    this.state = { // initialize state
      visable: false,
    };

    // bind this to handle open method
    // bind this to handle close method
  }

  // Add handleOpen method

  // Add handleClose method

  render() { // render method is required
    const { categorySlug, form } = this.props; // destructure categorySlug and form
    // Destructure properties from the state object
    return ( // JSX returned from the render method
      <div className="service-details-wrapper">
        <h5 className="ellipsis">
          <Link
            to={
              categorySlug
                ? `/categories/${categorySlug}/${form.slug}`
                : `/forms/${form.slug}`
            }
          >
            {form.name}
          </Link>
          <i className="fa fa-question-circle 2x active-help-icon" title="Help" role="button" tabIndex="0" />
        </h5>
        <p className="ellipsis">{form.description}</p>
        {/* Add ActiveHelp component */}
      </div>
    );
  }
}