getValue - infinite loop


Topic: getValue - infinite loop

toddleish pro asked 2 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 2 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 2 years ago

Good morning, I have the same problem.

Anna Morawska staff commented 2 years ago

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

kenjo commented a year 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 a year 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.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.7.0
  • Device: Dell Laptop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No