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 free asked 4 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?

Add comment

Jakub Chmura staff answered 4 years ago

0 1 Best answer

<p>Probably your <code>getValue</code> 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.</p>

<pre class="prettyprint"><code>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;
</code></pre>

Please insert min. 20 characters.

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

karthickumar free commented 3 years 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

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB React
MDB Version: 4.26.0
Device: PC
Browser: any
OS: Debian
Provided sample code: Yes
Provided link: Yes

caio.davi

49Support score
5Questions 2Answers 0Snippets