Topic: getValue - infinite loop

kenearl pro asked 5 years ago


I define an MDBReact Date and Time picker as per the code below   Whenever the page renders, the getValue function is being called and executed, which causes an infinite loop and crashes the program. (see below)   Any idea why the functions get called each render?   Thanks!   <div className="col-sm-3"> <MDBDatePicker label="Event Date" getValue={this.updateEventDate} /> <div className={this.validation.eventDate.isInvalid ? "alert alert-danger" : ""}> {this.validation.eventDate.message} </div> </div> <div className="col-sm-3"> <MDBTimePicker label="Event Time" clearable getValue={this.updateEventTime} /> <div className={this.validation.eventTime.isInvalid ? "alert alert-danger" : ""}> {this.validation.eventTime.message} </div> </div>updateEventDate = date => { this.setState({ eventDate: moment(date).format("MM/DD/YYYY") }); }; updateEventTime = date => { this.setState({ eventTime: moment(date).format("HH:mm:ss") }); };  

Anna Morawska staff commented 5 years ago

Hi there, thank you for reporting this bug, we will take a closer look at this, and let you know as soon as possible. Best, Ania

master@mastersistemas.net pro commented 5 years ago

Good morning, I have the same problem.

Anna Morawska staff commented 5 years ago

Hello, thank you, it's already on our TODO list. Best, Ania

kenjo free commented 5 years ago

Any update on this? It's unusable as is, cannot update the state, because it will re-render, and call again.


Anna Morawska staff answered 5 years ago


Hi there,

what exactly do you want to achieve? If you want to update the state please check out this solution:

import React, { Component } from "react";
import { MDBDatePicker,  MDBBtn } from "mdbreact";

class DateTimePickerPage extends Component {

  state = {
    date: new Date("12.12.2012"),
  }

  setDate = date => this.setState({ date: new Date(date) })

  render(){
    return(
      <>
        <div className="col-sm-3">
          <MDBDatePicker value={this.state.date} getValue={this.updateStateValue} />
          <MDBBtn onClick={() => this.setDate("10.20.2020")} size="sm" className="ml-4">Set Date "10.20.2020"</MDBBtn>
        </div>
      </>
    )
  }
}

export default DateTimePickerPage;


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.0
  • Device: Dell Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No