Search code examples
reactjsdaterangepicker

Maximum call stack size exceeded?

i am adding date range picker in my project when i run daterange picker in a seperate project it works fine but when i try to integrate it with my project then i am getting this error with the same code "Uncaught RangeError: Maximum call stack size exceeded" here is my code for date range picker this is my Date.js file


import React, { Component } from 'react';

import  {DateRangePicker}  from 'react-date-range';
import { addDays } from 'date-fns';

import moment from 'moment'
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

class Date extends Component {
  handleSelect(ranges){
    console.log(ranges);
 
  }
  constructor(props) {
    super(props);
    this.state = {
      selectionRange: {
        startDate: new Date(),
        endDate: addDays(new Date(), 7),
       
        key: "selection"
      }
    }
  }
  

  handleDateSelect = (item) => {
    this.setState({
      ...item
    });
  }

  render()
  {
 
    return (
   
 
      <DateRangePicker
     
      onChange={(item) => this.setState({selectionRange: item.selection})}
   

      showSelectionPreview={true}
      moveRangeOnFirstSelection={false}
      months={2}
     
      ranges={[this.state.selectionRange]}
     
      direction="horizontal"
    />
    );
  }
}

export default Date

can anyone help me how to fix this ? i am getting this error in my console enter image description here

Solution

  • You class is named Date so when you call new Date() you are invoking the class's constructor. This happens recursively and causes the stack overflow.

    Try renaming your class to something else (like DatePicker).