Click here to Skip to main content
14,735,318 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi i am getting an warning message on my react functional component.
Warning :
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function



Below is my functional component
import React, { useState, useEffect } from 'react';
import { ErrorMessage } from "formik";
import _ from 'lodash'
import { Input } from "antd";
import './custom-input.less';

const InputSearchFilter = (props) => {
    const { placeholder, loading, arrayToFilter, value, name, onChange, onBlur, touched, 
          label, row, err, disabled } = props;

    const [valueObject, setValueObject] = useState({ medicalSchool: null, 
                                                        medicalSchoolId: null });
    const [showList, setShowList] = useState(false);
    const [filteredList, setFilteredList] = useState([]);

    return (
        <div className="input__wrap InputSearchFilter">
            {!(err && touched) ? label !== undefined && <div className="input__label"> 
            {label}</div> : ""}
            <ErrorMessage name={name}>
                {errorMessage => <div className="input__error">{errorMessage}</div>}
            </ErrorMessage>
            <Input.Search
                rows={row}
                disabled={disabled}
                name={name}
                allowClear
                value={valueObject.medicalSchool && valueObject.medicalSchool}
                placeholder={placeholder}
                onChange={onChangeText}
                onBlur={(ev) => {
                    onBlur(ev)
                    setTimeout(() => {
                        setShowList(false)
                    }, 1000, [setShowList]);
                }}
                autoComplete="off"
                loading={loading}
            />
            {showList && filteredList.length > 0 ?
                <div className="listContainer">
                    {filteredList.map((item, index) => {
                        return (
                            <div style={{ display: 'contents' }} key={item.value} 
                                 onClick={(e) => {
                                // e.stopPropagation();
                                // e.preventDefault();
                                handleSelectListItem(item)
                            }}>
                                <div className="list-item" >
                                    {item.label}
                                </div>
                                {index - 1 < filteredList.length - 2 ? <span 
                                               className='list-seperator' /> : null}
                            </div>
                        )
                    })}
                </div>
                : null}
        </div >
    );
}

export default InputSearchFilter;


What I have tried:

this component i have used in formik form inside a drawer. that drawer gets closed when i click outside of it.

I have tried removing the onBlur function, then it disables the warning,
onBlur={(ev) => {
                   onBlur(ev)
                   setTimeout(() => {
                       setShowList(false)
                   }, 1000, [setShowList]);
               }}


but the problem is i want the setShowList(false) function to be get executed when i click outside of the textbox. How can i do so ?? Please suggest some idea.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900