class Page extends React.Component {
    this.state = {
            formData: {
                amount: '',
                phone: '',
                name: this.props.userName
            }

    handleChange = (event, {name, value}) => {
        if (this.state.formData.hasOwnProperty(name)) {
            this.setState({ formData: {...this.state.formData, [name]: value }});
        }
    }
    render(){
        const { formData, errors, amount_option} = this.state
        const { name, amount, phone } = formData
        const { errorBag } = this.validator

    return(
    <form>
        <div className="cp-field">
            <h5>Phone Number</h5>
            <div className="cpp-fiel">
                <input type="text" name="phone" value={phone} placeholder="Eg. 0123456789" onChange={this.handleChange}></input>
                <i className="fa fa-lock"></i>
            </div>
        </div>
        <div className="cp-field">
            <h5>Amount</h5>
            <div className="cpp-fiel">
                <select name="amount" onChange={this.handleChange}>
                    {amount_option.map(function(amount){
                        return <option key={amount.key} value={amount.value}>{amount.text}</option>
                    })}
                </select>
            </div>
        </div>
        <div className="save-stngs pd2">
            <ul>
                <li><button type="submit" onClick={this.handleSubmit.bind(this)}>Cash Deposit</button></li>
            </ul>
        </div>
    </form>
    )
    }
}