text: function Deposit(){
    const [show, setShow]         = React.useState(true);
    const [status, setStatus]     = React.useState('');
    const [deposit, setDeposit]     = React.useState('');
    const ctx = React.useContext(UserContext);
    
    function validate(field, label){
      if (!field) {
        setStatus('Error: ' + label);
        setTimeout(() => setStatus(''),3000);
        return false;
      }
      return true;
  }
  
  
  function handleDeposit(){
  if (!validate(deposit,     'Please Enter a Deposit Amount'))     return;
  if(deposit < 0){
    setStatus('Error: ' + "Please Enter a Positive Number");
    setTimeout(() => setStatus(''),3000);
    return;
  }
  ctx.users[0].balance -= -deposit;
  setShow(false);
  }
  
  
  
  
  function clearForm(){
    setDeposit('');
    setShow(true);
  }
  
    return (
      <Card
        status={status}
        txtcolor="black"
        header="Deposit Header"
        title="Balance"
        text={ctx.users[0].balance}
        body={show ? (  
          <>
          Deposit<br/>
          <input type="number" className="form-control" id="deposit" placeholder="$" value={deposit} onChange={e => setDeposit(e.currentTarget.value)} /><br/>
          <button type="submit" className="btn btn-light" onClick={handleDeposit}>Make Deposit</button>
          </>
        ):(
          <>
          <h5>Success</h5>
          <button type="submit" className="btn btn-light" onClick={clearForm}>Make Another Deposit</button>
          </>
        )}
      />    
    )
  }
  