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) => {
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.