How to avoid `MDBSelect` to do multiples re-calls using `get


Topic: How to avoid `MDBSelect` to do multiples re-calls using `getValue`?

caio.davi asked 2 years ago

I have an MDBSelect component and a handle function to get its changes, like that:

<MDBSelect
      search
      options={props.facilities.map((Facility) => {
        return {
          text: Facility.Name,
          value: Facility.ID.toString(),
        };
      })}
      getValue={props.handleSelect}
    />

And the handler:

const handleSelect = (value) => {
const newFormContents = { ...formContents };
newFormContents["FacilityID"] = value[0];
setFormContents(newFormContents);
};

But getValue keep calling the handler after the change, and causing the follow error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I'm using gatValue because I didn't find a onChange method in the API documentation.May you help me telling what am I doing wrong?


Jakub Chmura staff premium answered 2 years ago

Hi @caio.davi,

Probably your getValue handler causes multiple re-calls. Please check this example, everything works fine. You need to follow the example below and try to fix your getValue handle function.

import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';

class SelectPage extends Component {
  state = {
    options: [
      {
        checked: false,
        disabled: false,
        icon: null,
        value: '1',
        text: 'Option 1',
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        value: '2',
        text: 'Option 2',
      },
      {
        checked: false,
        disabled: false,
        icon: null,
        value: '3',
        text: 'Option 3',
      },
    ],
  };

  getValueOfSelect = (value) => {
    console.log(value);
  };

  render() {
    return (
      <div>
        <MDBSelect
          multiple
          options={this.state.options}
          selected='Choose your option'
          getValue={this.getValueOfSelect}
        />
      </div>
    );
  }
}

export default SelectPage;

Best, Kuba


karthickumar88 commented a year ago

Hi Kuba,

Your example just print the selected value. But the problem is when we update the options when user select any value in from the select, then the error occur.

Thanks, Karthic


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.26.0
  • Device: PC
  • Browser: any
  • OS: Debian
  • Provided sample code: No
  • Provided link: Yes