Skip to content

Using UseState in Reactjs

I am trying to map the values of userIDs to listUserIds, and then use values of listUserIds as keys in listUser function. But it only show the last value. What did I go wrong?

function Search(props) {
var listUserIds = []
const [userIDs, setUserIDs] = useState([]);
useEffect( async() => {
    console.log('useEffect has been called!');
    await userService.getUserAll().then(response => {
        var listUser =;
        listUser.forEach(element => {
  }, []);
Object.values(userIDs).forEach(x => listUserIds.push(x));
listUserIds.forEach(x => console.log(x));
const listUser = =>
<div key={userId}>
    <ThumbnailAdmin id={userId} ></ThumbnailAdmin>
return (
    <div class="col-lg-9 mt-4 mt-lg-0" style={{marginLeft:"200px"}}>
        <div class="row" >
            <div class="col-md-12">
                <div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">



You can set the values like this. using map you can collect all the ids then you can update the state.

await userService.getUserAll().then(response => {
  var listUser =;
  let ids = =>;