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!

Guru Hadadi · Accepted Answer · 2020-06-11 02:25:46Z

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)}

edited Jun 11, 2020 at 2:25

answered Jun 11, 2020 at 2:20

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetching selected dropdown value using react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related