javascript - ReactJS Redux Live editing -

i'm trying build similar code widget example react redux universal hot example. exception data fetched postgresql database.

the code lists groups should, when click on edit following errors.

warning: react.createelement: type should not null, undefined, boolean, or number. should string (for dom elements) or reactclass (for composite components). check render method of `admingrouplist` error: element type invalid: expected string (for built-in components) or class/function (for composite components) got: undefined. check render method of `admingrouplist` 

here admingrouplist.js

import react, { component } 'react'; import helmet 'react-helmet'; import { connect } 'react-redux'; import { asyncconnect } 'redux-async-connect'; import { routeactions } 'react-router-redux'; // import { table } 'react-bootstrap/lib'; import * groupactions 'redux/modules/groups'; import {isloaded, load loadgroups} 'redux/modules/groups'; import {initializewithkey} 'redux-form'; import { groupform } 'components/admin/groupform';  @asyncconnect([{   deferred: true,   promise: ({store: {dispatch, getstate}}) => {     if (!isloaded(getstate())) {       return dispatch(loadgroups());     }   } }]) @connect(   state => ({     groups: state.groups.data,     editing: state.groups.editing,     error: state.groups.error,     loading: state.groups.loading   }),   { ...groupactions, initializewithkey, pushstate: routeactions.push }) export default class admingrouplist extends component {   static proptypes = {     groups: react.proptypes.object,     pushstate: react.proptypes.func.isrequired,     error: react.proptypes.string,     loading: react.proptypes.bool,     initializewithkey: react.proptypes.func.isrequired,     editing: react.proptypes.object.isrequired,     load: react.proptypes.func.isrequired,     editstart: react.proptypes.func.isrequired   }    render() {     const groups = object.values(this.props.groups);     const handleedit = (group) => {       const {editstart} = this.props;       return () => editstart(string(group.id));     };     const { error, editing, loading, load} = this.props;     let refreshclassname = 'fa fa-refresh';     if (loading) {       refreshclassname += ' fa-spin';     }     return (       <div classname="container">         <h1>           tuoteryhmät ({groups.length})           <button classname="btn btn-success" onclick={load}>             {' '} reload groups           </button>         </h1>         <helmet title="groups"/>         {error &&         <div classname="alert alert-danger" role="alert">           <span classname="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>           {' '}           {error}         </div>}         {groups && groups.length &&         <table classname="table table-striped">           <thead>           <tr>             <th>id</th>             <th>name</th>             <th></th>           </tr>           </thead>           <tbody>           {             groups.map((group) => editing[group.id] ?               <groupform formkey={string(group.id)} key={string(group.id)} initialvalues={group}/> :               <tr key={group.id}>                 <td>{group.id}</td>                 <td>{group.name}</td>                 <td>                   <button classname="btn btn-primary" onclick={handleedit(group)}>                     <i classname="fa fa-pencil"/> edit                   </button>                 </td>               </tr>)           }           </tbody>         </table>}       </div>     );   } } 

and here groupform.js

import react, {component, proptypes} 'react'; import {connect} 'react-redux'; import {bindactioncreators} 'redux'; import {reduxform} 'redux-form'; import groupvalidation 'utils/groupvalidation'; import * groupactions 'redux/modules/groups';  @connect(   state => ({     saveerror: state.groups.saveerror   }),   dispatch => bindactioncreators(groupactions, dispatch) ) @reduxform({   form: 'group',   fields: ['id', 'name'],   validate: groupvalidation }) export default class groupform extends component {   static proptypes = {     fields: proptypes.object.isrequired,     editstop: proptypes.func.isrequired,     handlesubmit: proptypes.func.isrequired,     invalid: proptypes.bool.isrequired,     pristine: proptypes.bool.isrequired,     save: proptypes.func.isrequired,     submitting: proptypes.bool.isrequired,     saveerror: proptypes.object,     formkey: proptypes.string.isrequired,     values: proptypes.object.isrequired   };    render() {     const { editstop, fields: {id, name}, formkey, handlesubmit, invalid,       pristine, save, submitting, saveerror: { [formkey]: saveerror }, values } = this.props;     return (       <tr>         <td>{id.value}</td>         <td>           <input type="text" classname="form-control" {...name}/>           {name.error && name.touched && <div classname="text-danger">{name.error}</div>}         </td>         <td>           <button classname="btn btn-default"                   onclick={() => editstop(formkey)}                   disabled={submitting}>             <i classname="fa fa-ban"/> cancel           </button>           <button classname="btn btn-success"                   onclick={handlesubmit(() => save(values)                     .then(result => {                       if (result && typeof result.error === 'object') {                         return promise.reject(result.error);                       }                     })                   )}                   disabled={pristine || invalid || submitting}>             <i classname={'fa ' + (submitting ? 'fa-cog fa-spin' : 'fa-cloud')}/> tallenna           </button>           {saveerror && <div classname="text-danger">{saveerror}</div>}         </td>       </tr>     );   } } 

this error message means have issue imports.

if export export groupform default default class groupform, should import without curly brackets in admingrouplist.js:

replace line import { groupform } 'components/admin/groupform' import groupform 'components/admin/groupform'