.js

import { compose } from 'lodash/fp';
import React from 'react';
import { reduxForm, destroy } from 'redux-form';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';

import ExpTextField from 'common/components/form/ExpTextField';

const styles = {
  root: {
    padding: 10
  }
};

const mapDispatchToProps = (dispatch, { name }) => ({
  destroyForm: () => dispatch(destroy(name)),
});


class RenameForm extends React.Component {
  render() {
    const {
      classes,
      handleSubmit,
      error,
    } = this.props;

const required = value => value ? undefined : 'Required';
    return (
      <div className={classes.root}>
        <form onSubmit={handleSubmit}>
          <div>{error}</div>
          <ExpTextField name="name" label="Name" fullWidth autoFocus required validate={[required]} />
          <button type="submit" style={{display: 'none'}} />
        </form>
      </div>
    );
  }
}

export default compose([
  reduxForm(),
  connect(null, mapDispatchToProps),
  withStyles(styles),
])(RenameForm);