kurasaiteja/gist:7fa6c535a029aa211a091dd551c5c935

## gistfile1.js
/*Register.js*/

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import Head from './Head'
import TextField from '@material-ui/core/TextField';

import {
  Form,
  Grid,
  Segment,
  Button,
  Header,
  Message,
} from "semantic-ui-react";
import { Link } from "react-router-dom";

const styles = theme => ({
  form:{
    display:'flex',
  },
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  dense: {
    marginTop: 16,
  },
  menu: {
    width: 500,
  },
});

const years = [
  {
    value: '1',
    label: '1st',
  },
  {
    value: '2',
    label: '2nd',
  },
  {
    value: '3',
    label: '3rd',
  },
  {
    value: '4',
    label: '4th',
  },
];
const branches = [
  {
    value: 'cse',
    label: 'CSE',
  },
  {
    value: 'ece',
    label: 'ECE',
  },
  {
    value: 'it',
    label: 'IT',
  },
  {
    value: 'me',
    label: 'MECH',
  },
  {
    value: 'eee',
    label: 'EEE',
  },
  {
    value: 'cse',
    label: 'CSE',
  },
];


class OutlinedTextFields extends React.Component {
  state = {
    heads:[
    {name:'teja'}]
  }

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

  render() {
    const { classes } = this.props;
    const hStyle = {
  color:'#0c374d',
  textAlign: 'center',
};

    return (

      <Grid textAlign="center" verticalAlign="middle" className="app">
        <Grid.Column style={{ maxWidth: 450 }}>

      <Head name={this.state.heads[0].name} ></Head>
          <form className={classes.container} noValidate autoComplete="off" size="large">
      <TextField
          label="Username"
          className={classes.textField}
          type="text"
          margin="normal"
          variant="outlined"
          onChange={this.state.changed}
          changed={this.setName}
        />
        <TextField

          label="Password"
          className={classes.textField}
          type="password"
          name="password"
          autoComplete="current-password"
          margin="normal"
          variant="outlined"
          changed={this.setName}
        />
         <TextField

          label="Email"
          className={classes.textField}
          type="email"
          name="email"
          autoComplete="email"
          margin="normal"
          variant="outlined"
        />
        <TextField
          id="outlined-select-currency-native"
          select
          label="Branch"
          className={classes.textField}
          value={this.state.branch}
          onChange={this.handleChange('branch')}
          SelectProps={{
            native: true,
            MenuProps: {
              className: classes.menu,
            },
          }}

          margin="normal"
          variant="outlined"
        >
          {branches.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>          <TextField
          id="outlined-select-currency-native"
          select
          label="Year of study"
          className={classes.textField}
          value={this.state.year}
          onChange={this.handleChange('year')}
          SelectProps={{
            native: true,
            MenuProps: {
              className: classes.menu,
            },
          }}

          margin="normal"
          variant="outlined"
        >
          {years.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </TextField>


      </form>
      <Message>
            Already a user? <Link to="/login">Login</Link>
          </Message>

      </Grid.Column>
      </Grid>

    );
  }
}

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

export default withStyles(styles)(OutlinedTextFields)

/*Head.js*/

import React from 'react';
const head = (props) => {
	return(
		<h1>Hey {props.name}, Register now!</h1>
	)
}
export default head;
	/Register.js/

	import React from 'react';
	import PropTypes from 'prop-types';
	import classNames from 'classnames';
	import { withStyles } from '@material-ui/core/styles';
	import MenuItem from '@material-ui/core/MenuItem';
	import Head from './Head'
	import TextField from '@material-ui/core/TextField';

	import {
	Form,
	Grid,
	Segment,
	Button,
	Header,
	Message,
	} from "semantic-ui-react";
	import { Link } from "react-router-dom";

	const styles = theme => ({
	form:{
	display:'flex',
	},
	container: {
	display: 'flex',
	flexWrap: 'wrap',
	},
	textField: {
	marginLeft: theme.spacing.unit,
	marginRight: theme.spacing.unit,
	},
	dense: {
	marginTop: 16,
	},
	menu: {
	width: 500,
	},
	});

	const years = [
	{
	value: '1',
	label: '1st',
	},
	{
	value: '2',
	label: '2nd',
	},
	{
	value: '3',
	label: '3rd',
	},
	{
	value: '4',
	label: '4th',
	},
	];
	const branches = [
	{
	value: 'cse',
	label: 'CSE',
	},
	{
	value: 'ece',
	label: 'ECE',
	},
	{
	value: 'it',
	label: 'IT',
	},
	{
	value: 'me',
	label: 'MECH',
	},
	{
	value: 'eee',
	label: 'EEE',
	},
	{
	value: 'cse',
	label: 'CSE',
	},
	];




	class OutlinedTextFields extends React.Component {
	state = {
	heads:[
	{name:'teja'}]
	}

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

	render() {
	const { classes } = this.props;
	const hStyle = {
	color:'#0c374d',
	textAlign: 'center',
	};

	return (

	<Grid textAlign="center" verticalAlign="middle" className="app">
	<Grid.Column style={{ maxWidth: 450 }}>

	<Head name={this.state.heads[0].name} ></Head>
	<form className={classes.container} noValidate autoComplete="off" size="large">
	<TextField
	label="Username"
	className={classes.textField}
	type="text"
	margin="normal"
	variant="outlined"
	onChange={this.state.changed}
	changed={this.setName}
	/>
	<TextField

	label="Password"
	className={classes.textField}
	type="password"
	name="password"
	autoComplete="current-password"
	margin="normal"
	variant="outlined"
	changed={this.setName}
	/>
	<TextField

	label="Email"
	className={classes.textField}
	type="email"
	name="email"
	autoComplete="email"
	margin="normal"
	variant="outlined"
	/>
	<TextField
	id="outlined-select-currency-native"
	select
	label="Branch"
	className={classes.textField}
	value={this.state.branch}
	onChange={this.handleChange('branch')}
	SelectProps={{
	native: true,
	MenuProps: {
	className: classes.menu,
	},
	}}

	margin="normal"
	variant="outlined"
	>
	{branches.map(option => (
	<option key={option.value} value={option.value}>
	{option.label}
	</option>
	))}
	</TextField> <TextField
	id="outlined-select-currency-native"
	select
	label="Year of study"
	className={classes.textField}
	value={this.state.year}
	onChange={this.handleChange('year')}
	SelectProps={{
	native: true,
	MenuProps: {
	className: classes.menu,
	},
	}}

	margin="normal"
	variant="outlined"
	>
	{years.map(option => (
	<option key={option.value} value={option.value}>
	{option.label}
	</option>
	))}
	</TextField>


	</form>
	<Message>
	Already a user? <Link to="/login">Login</Link>
	</Message>

	</Grid.Column>
	</Grid>

	);
	}
	}

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

	export default withStyles(styles)(OutlinedTextFields)

	/Head.js/

	import React from 'react';
	const head = (props) => {
	return(
	<h1>Hey {props.name}, Register now!</h1>
	)
	}
	export default head;