title: Passing a username object from API call to a second API call with handler
body: <p>I have two APIs, the first API call to fetch an array of accounts with usernames/objects. The username/object will get passed to the second API call to deactivate the individual account. A button will handle the second API call to deactivate the account.</p>
  <p>Currently, the error I have all of the usernames/objects are being passed together to the second call and not individually.</p>
  <pre><code>const [activeAccounts, setActiveAccounts] = useState([])
  
  const [deactivateUsername, setDeactivateUsername] = useState({
      username: '',
  })
  
  useEffect(() =&gt; {
  
      const ActiveAccountsApi = async () =&gt; {
      const res = await fetch('/api/user/admin/account/active')
      const data = await res.json()
      setActiveAccounts(data)
      console.log(data)
     }
  
     const accountUsername = activeAccounts.map(acc =&gt; acc.username)
     const user = accountUsername.map(single =&gt; single)
     setDeactivateUsername({ username: user })
  
  }, [])
  
  const DeactivateAccountsApi = async () =&gt; {
      const res = await fetch(`/api/admin/account/deactivate/${deactivateUsername.username}`)
      const data = await res.json()   
  }
  
  //button will handle this - will remove the item from the returned list and should handle 
   the second API call/request to deactivate the account with the username object being passed
  
  const handleRemoveItem = idx =&gt; {
      const newAccount = [...activeAccounts]
      newAccount.splice(idx, 1)
      setActiveAccounts(newAccount)
      DeactivateAccountsApi()
  }
  </code></pre>