Not able to access the state within the onChange method.

[VSV6]

`import { useEffect, useState } from "react";
import Dropdown from "./container";
import data from "./data";

import "react-dropdown-tree-select/dist/styles.css";
import "./styles.css";

export default function App() {
const [filters, setFilters] = useState([]);
const [selectedNodes, setSelectedNodes] = useState([]);

useEffect(() => {
console.log(filters);
}, [filters]);

return (

<Dropdown
data={data}
onChange={(currentNode, selectedNodes) => {
console.log(filters);
setSelectedNodes(selectedNodes);
}}
/>
<button
className="btn btn-primary btn-sm"
onClick={() => {
setFilters([...filters, "new"]);
}}
>
Add filter

);
}
`
I cannot access the filter state within the onChange method of the dropdown library. What is the issue that is causing to not to access the filter state variable? Can anyone help me with this issue?

https://codesandbox.io/s/icy-frost-jhte64?file=/src/App.js:0-805
This is my example on the code sandbox.

[mrchief]

You're most likely re-rendering. This is a common issue with these React functions - it masks the lifecycle behaviors. You can implement an HoC that prevents re-rendering and see if that solves ti for you. You'll find plenty of examples in old issues.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 10 days if no further activity occurs. Thank you for your contributions.