Fetching selected dropdown value using react.js

Question

Im trying to fetch the value of the selected dropdown option, but Im having trouble... the following code gives me this error message

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.

import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS } from '../../actions/keys';
import { users } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';

import {
    LumosTheme,
    Grid, Form, Icon, Container, Loader
} from '@customeLibrary/core';

class SearchBar extends Component { 
    state = {
        responseData: " ",
        handle: true,
        query: "",
        filterValues: [],
        optionSelected:null, // Initializing this value so I could track the selected dropdown option 
    };

    searchString = this.state.query;
    responseData = this.props.Users.data;

    componentDidMount() {
        this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users).then(() => {
            return this.setState({
                handle: false
            })
        })
    }
    handleInputChange = (value) => {
        console.log("In HandleInputFunction, Value= ", value)
        this.setState({ query: value }, () => {
            console.log("In HandleInputFunction, query= ", this.state.query)
            this.filterArray();
        }
        )
    }
    filterArray = () => {
        let searchString = this.state.query;
        let responseData = this.props.Users.data;


        if (searchString.length > 0) {
            const filterData = _.filter(responseData, (v) => v.first_name.includes(searchString) ||v.last_name.includes(searchString) || v.number.includes(searchString) );    
            this.setState({
                filterValues: filterData
            })
        }

    }

    searchByOptions = [
        { label: 'Name or Number', value: 'NAME/NUMBER' },
        { label: 'Distribution List', value: 'DL' },
        { label: 'Database Schema or Table', value: 'DB' },
        { label: 'Role', value: 'Role' }
    ];

    handleDropdownChange= (value) => {
        // Here I want to fetch whatever dropdown option the user selected
        this.setState({
                optionSelected: value
            })
        }
    render() {
        if (this.state.handle) {
            return <Loader />
        }
        else {
            return (
                <LumosTheme>
                    <Container width='1379px'>
                        &nbsp;&nbsp;
                    </Container>
                    <Container width='1379px'>
                        <Grid paddingTop='10px'>
                            <Form.Item width='380px'>
                                <Form.Dropdown
                                    // I'm having trouble fetching the value of the selected dropdown option and sending it to the 'handleDropdownChange' function
                                    options={this.searchByOptions}
                                    onChange={this.handleDropdownChange(this.searchByOptions)}
                                    defaultOption={this.searchByOptions[0]}
                                />
                            </Form.Item>
                        </Grid>

                        <Grid flexWrap="wrap" width='1000px'>
                            &nbsp;
                            < Form.SearchBox placeholder='Search' icon={<Icon.SearchRounded />}
                                userSelectOnClick
                                openOnClick
                                onSearch={this.handleInputChange}
                                value={this.state.query}
                            >
                                <Form.SearchList>
                                {this.state.responseData ?
                                    this.state.filterValues.map(item => (
                                        <Form.SearchOption
                                            label={[item.first_name+' '+item.last_name+' '+item.number]}
                                            value={[item.first_name,' ', item.last_name,' ', item.number]}
                                            key={[item.first_name,' ', item.last_name,' ', item.number]}
                                        />
                                    )):'null'}
                                </Form.SearchList>
                            </ Form.SearchBox>
                        </Grid>
                    </Container>
                </LumosTheme>
            )
        }
    }
}
const mapStateToProps = state => {

    return {
        Users: state.users,
    }
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar);

This is the following documentation for the custom Form.Dropdown component

const Example = () => {
  const [shippingSpeed, setShippingSpeed] = React.useState(null);
  const shippingOptions = [
    { label: 'Fast (1 - 2 Days)', value: 'fastShipping' },
    { label: 'Normal (3 - 5 Days)', value: 'normalShipping' },
    { label: 'Slow (5 - 7 Days)', value: 'slowShipping' }
  ];

  return (
    <Form.Item htmlFor="shipping" id="shipping" label="Shipping Speed">
      <Form.Dropdown
        aria-label="Shipping speed"
        buttonLabel="Choose shipping Speed"
        onChange={selectedSpeed => {
          setShippingSpeed(selectedSpeed);
        }}
        options={shippingOptions}
      />
      <Typography kind="body1" mt={2}>
        <strong>Shipping speed:</strong> {shippingSpeed || 'Not selected'}
      </Typography>
    </Form.Item>
  );
};

& this is how the UI looks like, any feedback would be appreciated! THANK YOU!

Answer 1

You are calling this.handleDropdownChange directly and inside the function you are setting the state and therefore it goes to infinite loop.

Use an inline arrow function. Also In your onChange you are passing this.searchByOptions which is incorrect. Instead you need to pass selected which your form library gives in your onChange.

Like this

onChange={(selectedOption) => this.handleDropdownChange(selectedOption)}