christmas/src/form.js

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import { FormControl, Input, InputLabel, FormHelperText } from '@material-ui/core'


const styles = theme => ({
  container: {
    display: 'block',

  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
  fullWidth: {
    width: '100%'
  }
});

const foodItems = [
  'Cake',
  'Turkey',
  'Roasted Dog',
  'Turnip',
  'Ratatouille'
]


class TextFields extends React.Component {
  state = {
    name: 'The Grinch',
    foodItem: '',
    significantOther: false
  };

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

  handleFoodSelect = (event) => {
    console.log('FOOD', event.target.value)
    this.setState({foodItem: event.target.value})
  }

  handleSignificantOther = () => {
    this.setState({significantOther: !this.state.significantOther})
  }

  FoodItems = () => {
    const items = []
    for (let i = 0; i < foodItems.length; i++) {
      items.push(<MenuItem key={i} value={foodItems[i]}>{foodItems[i]}</MenuItem>)
    }

    return items
  }

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <div style={styles.fullWidth}>
          <TextField
            id="standard-name"
            label="Name"
            className={classes.textField}
            value={this.state.name}
            onChange={this.handleChange('name')}
            margin="normal"
          />
        </div>
        <div style={styles.fullWidth}>
        <InputLabel htmlFor="significant-other">Bringing Someone?</InputLabel>
          <input
              id="significant-other"
              name="Significant Other"
              type="checkbox"
              checked={this.state.significantOther}
              onChange={this.handleSignificantOther} />
        </div>

          <FormControl className='food-select' style={styles.fullWidth}>
            <InputLabel htmlFor="food-helper">What You Got, Gangster?</InputLabel>
            <Select style={styles.fullWidth}
              value={this.state.foodItem}
              onChange={this.handleFoodSelect}
              input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}
            >
              <MenuItem value="">
                <em>Not a damn thing!</em>
              </MenuItem>
              {this.FoodItems()}
            </Select>
            <FormHelperText>Bring Us Food</FormHelperText>
          </FormControl>
      </form>
    );
  }
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TextFields);