# conversion to arrow function and filter

import React from 'react';
 
class DaysInMonth extends React.Component{
    constructor(props){
        super(props);
 
        this.state = {
            monthList:['january', 'febuary', 'March', 'April', 'May', 'June', 'July', 'Auguest', 'September', 'octtober', 'November', 'December'],
            year:2020,
            day31: [],
            day30: [],
            day28: []
        }
        this.handlerDay31 = this.handlerDay31.bind(this);
      this.handlerDay30 = this.handlerDay30.bind(this);
      this.handlerDay28 = this.handlerDay28.bind(this);
    }
    handlerDay31(){
      const months = this.state.monthList;
      months.forEach((monthName, index) => {
        const days = new Date(this.state.year, index + 1, 0).getDate();
        if (days === 31) {
          this.setState((prevState) => ({
            day31: [...prevState.day31, monthName]
          }))
        }
      })
    }
  
    handlerDay30() {
      const months = this.state.monthList;
      months.forEach((value, index) => {
        const days = new Date(this.state.year, index + 1, 0).getDate();
        if (days === 30) {
          this.setState((prevState) => ({
            day30: [...prevState.day30, value]
          }))
        }
      })
    }
  
    handlerDay28() {
      const months = this.state.monthList;
      months.forEach((value, index) => {
        const days = new Date(this.state.year, index + 1, 0).getDate();
        if (days === 29 || days === 28) {
          this.setState((prevState) => ({
            day28: [...prevState.day28, value]
          }))
        }
      })
    }
    render(){
        return <div className="wrapper">
           
            <div className="mLR10 dIB">
                 <ul>{this.state.day31.map((month) => <li>{ month }</li>)}</ul>
                 <button onClick={this.handlerDay31}>31 Days Months</button>
            </div>
            <div className="mLR10 dIB">
                 <div>{this.state.day30.map((month) => <li>{ month }</li>)}</div>
                 <button onClick={this.handlerDay30}>30 Days Months</button>
            </div>
            <div className="mLR10 dIB">
                 <div>{this.state.day28.map((month) => (<li>{ month }</li>))}</div>
                 <button onClick={this.handlerDay28}>28/29 Days Months</button>
            </div>
           
        </div>
    }
}

ReactDOM.render(<DaysInMonth />, document.querySelector("#mountNode"))