Mount calendar with React

Question

I’m having a question of how to analyze the amount of days a month for a certain calendar, I have to set up a "Nav" with the weekly days of each month, but the problem is when I arrive on the last day of the month, it adds to 32,33.34... would like some hint to be able to validate per month.

import React, { Component } from 'react'
import './index.css'
import Icon from './../icone/'

const diaAtual = new Date()

const last = first + 6
const segunda = new Date(diaAtual.setDate(first + 1))
const quarta = new Date(diaAtual.setDate(first + 3));
const sexta = new Date(diaAtual.setDate(last - 1));

class BarraNavegacao extends Component {
  constructor(props) {
    super(props);
    this.state = {
      segunda: segunda.getDate(),
      quarta: quarta,
      sextaDia: sexta.getDate(),
      sextaAno: sexta.getFullYear(),
      getMonth: ''
    }
  }

componentWillMount(){
    this.returnMonth(sexta.getMonth())
  }

  acao = (event) => {
    const target = event.currentTarget;
    const targetID = target.id;
    if (targetID === 'arrowLeft') {
      const diaProximo = this.state.segunda - 6
      const diaFinal = diaProximo + 6
      this.setState({
        segunda: diaProximo - 1,
        sextaDia: diaFinal - 3
      })
    } else {
      const diaProximo = this.state.segunda + 6
      const diaFinal = diaProximo + 6
      this.setState({
        segunda: diaProximo + 1,
        sextaDia: diaFinal - 1
      })
    }
  }

  returnMonth(mes){
    if (mes === 0) {
      this.setState({getMonth: "Janeiro"})
    } else if (mes === 1) {
      this.setState({getMonth: "Fevereiro"})
    } else if (mes === 2) {
      this.setState({getMonth: "Março"})
    } else if (mes === 3) {
      this.setState({getMonth: "Abril"})
    } else if (mes === 4) {
      this.setState({getMonth: "Maio"})
    } else if (mes === 5) {
      this.setState({getMonth: "Junho"})
    } else if (mes === 6) {
      this.setState({getMonth: "Julho"})
    } else if (mes === 7) {
      this.setState({getMonth: "Agosto"})
    } else if (mes === 8) {
      this.setState({getMonth: "Setembro"})
    } else if (mes === 9) {
      this.setState({getMonth: "Outubro"})
    } else if (mes === 10) {
      this.setState({getMonth: "Novembro"})
    } else if (mes === 11) {
      this.setState({getMonth: "Dezembro"})
    }
  }

  render() {
      return (
      <nav className="secondBar">
        <div className="navBarLeft">
          <div id="arrowLeft" onClick={this.acao}>
            <Icon style='material-icons cheLeft'>chevron_left</Icon>
          </div>
          <a href="#"className="weekDate">
          <span>{this.state.segunda} - </span>
          <span>{`${this.state.sextaDia} de ${this.state.getMonth} de ${this.state.sextaAno}`}</span></a>
          <div id="arrowRight" onClick={this.acao}>
            <Icon style='material-icons cheRight'>chevron_right</Icon>
          </div>
        </div>
        <div className="navBarRight">
          <div className="cardSession">
            <Icon style='material-icons lensDis'>lens</Icon>
            <span className="status">disponivel</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensInd'>lens</Icon>
            <span className="status">indisponivel</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensPro'>lens</Icon>
            <span className="status">próxima sessão</span>
          </div>
          <div className="cardSession">
            <Icon style='material-icons lensEnc'>lens</Icon>
            <span className="status">sessão encerrada</span>
          </div>
        </div>
      </nav>
    )
  }
}
export default BarraNavegacao

Navigation month July:

Navigation next week:

This is where I have to validate next month...

Answer 1

I made a calendar in React that integrates with a holiday api.

To solve the problem of days and months I used the variable days and months in vector form:

this.state = {
      days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      months: [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December',
      ],
      weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      lastMonth: 11,
      month: 0,
      nextMonth: 1,
      year: 0,
      currentMonth: 0,
      currentYear: 0,
      calendar: [
        { id: 'week-1', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-2', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-3', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-4', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-5', data: [0, 0, 0, 0, 0, 0, 0] },
        { id: 'week-6', data: [0, 0, 0, 0, 0, 0, 0] },
      ],
      holidays: [],
      holiday: '',
    };

With these vectors you don’t have to worry about those huge if and Else and each month already has its right day.

If you want to see my entire code, click on this link.

I also have it running without the holiday api in my codepen