title: Fast way to convert react class component to functional component?
body: <p>I have a class component which works as expected but now I would like to change this class component to functional component</p>
  
  <p>Here is my class</p>
  
  <pre><code>import React, { Component } from 'react'
  import EventCalendar from '../App';
  import moment from 'moment';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  import Button from 'react-bootstrap/Button';
  import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
  
  
  const events =[
          {
              title: 'Womens History Month ',
              start: '2020-03-02',
              end: '2020-03-02',
              //description: '',
              url: 'dev91b558163211cf9d2e7d1efe6c3e32035973fdf9',
              eventClasses: 'event1'
  
          },
  ];
  
  export class CalendarDemo extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              moment: moment(),
  
          };
  
          this.handleNextMonth = this.handleNextMonth.bind(this);
          this.handlePreviousMonth = this.handlePreviousMonth.bind(this);
          this.handleToday = this.handleToday.bind(this);
          this.handleEventClick = this.handleEventClick.bind(this);
          this.handleEventMouseOver = this.handleEventMouseOver.bind(this);
          this.handleEventMouseOut = this.handleEventMouseOut.bind(this);
          this.handleDayClick = this.handleDayClick.bind(this);
      }
  
  
      handleNextMonth() {
          this.setState({
              moment: this.state.moment.add(1, 'M'),
          });
      }
  
      handlePreviousMonth() {
          this.setState({
              moment: this.state.moment.subtract(1, 'M'),
          });
      }
  
      handleToday() {
          this.setState({
              moment: moment(),
          });
      }
  
      handleEventMouseOver(target, eventData, day) {
        console.log("event data", target.props.eventData.url);
          this.setState({
  
          });
      }
  
      handleEventMouseOut(target, eventData, day) {
          this.setState({
  
          });
      }
  
      handleEventClick(target, eventData, day) {
          this.setState({
  
          });
      }
  
      handleDayClick(target, day) {
          this.setState({
  
          });
      }
  
      getMomentFromDay(day) {
          return moment().set({
              'year': day.year,
              'month': (day.month + 0) % 12,
              'date': day.day,
  
          });
      }
  
      getHumanDate() {
          return [moment.months('MM', this.state.moment.month()), this.state.moment.year(), ].join(' ');
      }
  
      render() {
  
          return (
              &lt;div style={styles}&gt;
  
                      &lt;Row className='topBar'&gt;
                          &lt;Col xs={6}&gt;
                              &lt;ButtonToolbar&gt;
                                  &lt;Button onClick={this.handlePreviousMonth}&gt;&amp;lt;&lt;/Button&gt;
                                  &lt;Button onClick={this.handleNextMonth}&gt;&amp;gt;&lt;/Button&gt;
                                  &lt;Button onClick={this.handleToday}&gt;Today&lt;/Button&gt;
                              &lt;/ButtonToolbar&gt;
                          &lt;/Col&gt;
                          &lt;Col xs={6}&gt;
                              &lt;div className='pull-right h2'&gt;{this.getHumanDate()}&lt;/div&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
                      &lt;br /&gt;
                      &lt;Row&gt;
                          &lt;Col xs={12}&gt;
                              &lt;EventCalendar
                                  month={this.state.moment.month()}
                                  year={this.state.moment.year()}
                                  events={events} 
                                  onEventClick={this.handleEventClick}
                                  onEventMouseOver={this.handleEventMouseOver}
                                  onEventMouseOut={this.handleEventMouseOut}
                                  onDayClick={this.handleDayClick}
                                  maxEventSlots={0}
                              /&gt;
                          &lt;/Col&gt;
                      &lt;/Row&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default CalendarDemo
  
      const styles = {
              position: 'relative',
          };
  </code></pre>
  
  <p>What do I need to change here so that I will get a functional component? </p>