Topic: GetValue for Select causes React To Exceed Update Depth

Stefischer free asked 2 years ago


Using the getValue prop on MDBSelect causes React to exceed update depth by calling the function multiple times.

renderChannels() {
    let Channels = this.props.channels.map((el, idx) => {
        return { text: el.name, value: el.id };
    });

    return(
        <MDBSelect
        search
        options={Channels}
        selected="Choose your option"
        label="Example label"
        getValue={this.handleSelectChange}
        />
    );
}

handleSelectChange(value) {
        this.setState({ newValue: value[0] }, () => console.log(this.state))
} 

Jakub Chmura staff answered 2 years ago


Hi @Stefischer,

I tested this solution and it works fine for me.

I think your channel function works wrong.

I paste the working version below.

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

class SelectPage extends Component {
  state = {
    options: [
      {
        checked: false,
        disabled: false,
        text: 'Option One',
        value: '1'
      },
      {
        checked: false,
        disabled: false,
        text: 'Option Two',
        value: '2'
      },
      {
        checked: false,
        disabled: false,
        text: 'Option Three',
        value: '3'
      },
      {
        checked: false,
        disabled: false,
        text: 'Option Four',
        value: '4'
      }
    ],
    newValue: ''
  };

  handleSelectChange = value => {
    this.setState({ newValue: value[0] }, () =>
      console.log(this.state.newValue)
    );
  };

  render() {
    return (
      <MDBSelect
        color='primary'
        getValue={this.handleSelectChange}
        options={this.state.options}
        label='Basic example'
      />
    );
  }
}

export default SelectPage;

Best, Kuba


Stefischer free answered 2 years ago


Yes, that works. Thank you


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.1
  • Device: Desktop
  • Browser: FireFox
  • OS: Win10
  • Provided sample code: Yes
  • Provided link: No