Cacher is the code snippet organizer for pro developers

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import faker from 'faker';
import fb from '../fb';
const remitaRef = fb.database().ref('/remita');

const p1 = { margin: 5, padding: 10, textAlign: 'center' }
const t1 = { margin: 5, width: 250 }
const b1 = { margin: 5 }

var ptypes = [
  { name: 'Application', amount: 5000 },
  { name: 'Registration', amount: 20000 }
]

export default class PaymentForm extends Component {
  constructor() {
    super();
    this.state = {
      paymentType: '',
      payerName: '',
      payerPhone: '',
      payerEmail: '',
      amount: '',
      name: '',
    };
  }

  componentDidMount = () => {
    remitaRef.child("name").on('value', snapshot => {
      console.log(snapshot.val())
      this.setState({ name: snapshot.val() });
    });
  }

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  handleClick = (e, id) => {
    e.preventDefault();

    switch (id) {
      case 'demo':
        var ptype = faker.random.objectElement(ptypes);
        var payment = {
          paymentType: ptype.name,
          payerName: faker.fake("{{name.lastName}} {{name.firstName}}"),
          payerPhone: faker.helpers.replaceSymbolWithNumber("080########"),
          payerEmail: faker.internet.email(),
          amount: ptype.amount,
        }
        this.setState({
          paymentType: payment.paymentType,
          payerName: payment.payerName,
          payerPhone: payment.payerPhone,
          payerEmail: payment.payerEmail,
          amount: payment.amount,
        });
        break;

      case 'submit':
        var time = (new Date).getTime();
        const itemsRef = fb.database().ref('/remita/payments/' + time);
        const item = {
          paymentType: this.state.paymentType,
          payerName: this.state.payerName,
          payerPhone: this.state.payerPhone,
          payerEmail: this.state.payerEmail,
          amount: this.state.amount,
        }
        itemsRef.set(item);
        console.log('records saved!');
        break;


      case 'clear':
        console.log('demo');
        break;


      default:
        console.log('default')
    }

  }

  render() {
    console.log(this.state.paymentType)
    return (
      <div>
        <form style={{ width: 300 }} noValidate autoComplete="off">
          <Paper style={p1} elevation={3}>
            <Typography variant="headline" component="h3">Payment Form</Typography>
            <FormControl style={{ margin: 5, minWidth: 250 }}>
              <InputLabel htmlFor="paymentType">Payment Type</InputLabel>
              <Select
                value={this.state.paymentType}
                onChange={this.handleChange}
                inputProps={{
                  name: 'paymentType',
                  id: 'paymentType',
                }}
              >
                <MenuItem value={'Application'}>Application</MenuItem>
                <MenuItem value={'Registration'}>Registration</MenuItem>
              </Select>
            </FormControl>

            <br />
            <TextField
              id="payerName"
              label="Payer Name"
              style={t1}
              value={this.state.payerName}
              onChange={this.handleChange('payerName')}
            />
            <TextField
              id="payerPhone"
              label="Payer Phone"
              style={t1}
              value={this.state.payerPhone}
              onChange={this.handleChange('payerPhone')}
            />
            <TextField
              id="payerEmail"
              label="Payer Email"
              style={t1}
              value={this.state.payerEmail}
              onChange={this.handleChange('payerEmail')}
            />
            <TextField
              id="amount"
              label="Amount"
              style={t1}
              value={this.state.amount}
              onChange={this.handleChange('amount')}
            />
            <br />
            <Button variant="contained" style={b1} onClick={((e) => this.handleClick(e, 'demo'))}>Demo</Button>
            <Button variant="contained" color="primary" style={b1} onClick={((e) => this.handleClick(e, 'submit'))}>Submit</Button>
            <Button variant="contained" color="secondary" style={b1} onClick={((e) => this.handleClick(e, 'clear'))}>Clear</Button>

          </Paper>
        </form>
      </div>
    );
  }
}