Options does not update from state/props for functional components

[abhaykumar01234]

import React, { useState, useEffect } from "react";
import Select from "react-dropdown-select";

const Try = () => {
const [options, setOptions] = useState([]);
const [loadedNow, setLoadedNow] = useState("users");

useEffect(() => {
changeToUsers();
}, []);

const changeToPosts = () => {
const result = [
{ title: "Post1", desc: "post1 description" },
{ title: "Post2", desc: "post2 description" },
];

setOptions(
result.map((post) => ({
label: post.title,
value: post.desc,
}))
);

setLoadedNow("posts");
};

const changeToUsers = () => {
const result = [
{ username: "Abhay", email: "abhay@gmail.co" },
{ username: "Ajay", email: "ajay@gmail.co" },
];

setOptions(
result.map((user) => ({
label: user.username,
value: user.email,
}))
);

setLoadedNow("users");
};
return (
<div style={{ padding: "1rem", background: "#fff" }}>
<h1>Try page</h1>
<hr />
<br />
<div>
<p>Hello | {loadedNow} loaded</p>
{loadedNow === "users" && (
<button onClick={changeToPosts}>change to posts</button>
)}
{loadedNow === "posts" && (
<button onClick={changeToUsers}>change to users</button>
)}
</div>

<Select
placeholder="Type to search"
multi
// loading={this.state.loading}
onChange={() => undefined}
values={[]}
keepOpen
options={options}
/>
</div>
);
};

export default Try;

Not working. Please provide solution

[sanusart]

ChangeToPosts and ChangeToUsers never return

[abhaykumar01234]

ChangeToPosts and ChangeToUsers never return

@sanusart
I didn't get you. What should these functions return?
They are already calling the setter function

I looked up previous issues and tried to implement your example
https://codesandbox.io/s/epic-herschel-194rp?file=/src/App.js
for synchronous values

inside a functional component

[abhaykumar01234]

ChangeToPosts and ChangeToUsers never return

https://codesandbox.io/s/epic-herschel-194rp?file=/src/App.js
Can you share a similar example sample code for functional components?

[sanusart]

@abhaykumar01234
https://codesandbox.io/s/vibrant-https-zg90n?file=/src/App.js

[abhaykumar01234]

@abhaykumar01234
https://codesandbox.io/s/vibrant-https-zg90n?file=/src/App.js

@sanusart
I noticed that it works for version 4.5.1 but not for version 4.6.1
[ created a new react 17.0.1 app to test] / [ also compatible with react 16.14 and older versions]

So i downgraded to 4.5.1 for now.

Please do check for 4.6.1. And thanks for the prompt replies.

[sanusart]

Yes. regression was introduced in 4.6.0. #133 Thanks. Latest version with no issue 4.5.2