React js es6 validation

Question

Am new to react js and am using es6 js version of coding and material ui . Here,my code seems like

class Components extends React.Component {


render() {

    return ( < div style = {
            styles.root
        } >
        <
        GridList cols = {
            2
        }
        padding = {
            1
        }
        cellHeight = {
            40
        }
        style = {
            styles.gridList
        } >
        <
        GridTile cols = {
            1
        }
        rows = {
            2
        } > < TextField type = "email"
        floatingLabelText = "Email Id"
        onChange = {
            this.changeValue.bind(this, 'Email')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            2
        } > < TextField floatingLabelText = "Record Name"
        onChange = {
            this.changeValue.bind(this, 'recordname')
        }
        /></GridTile >
        <
        GridTile > < DatePicker hintText = "Start Date"
        ref = "startdate"
        mode = "landscape"
        onChange = {
            this.changeValue.bind(this, 'strtdate')
        }
        /></GridTile >
        <
        GridTile > < DatePicker hintText = "End Date"

        mode = "landscape"
        onChange = {
            this.changeValue.bind(this, 'enddate')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            3
        } > < TextField floatingLabelText = "Sheet Type"
        onChange = {
            this.changeValue.bind(this, 'sheetname')
        }
        /></GridTile >
        <
        GridTile cols = {
            1
        }
        rows = {
            3
        } > < /GridTile> < /
        GridList > <
        /div>
    );
}}

Having multiple input boxes like this, i need to do require and email validation. I saw some examples using React.PropTypes.number in es5 type. I cant get any idea to do this.

Answer 1

For validations, an Input component can be created which will accept the pattern as the prop. After the validation gets fired, the value gets updated in the parent component, Form. An example in React is available in my public repo - nyanam. I am highlighting only the relevant components for illustration.

1. Input component
2. Form component