I don't think I'm exporting and importing wrong. Do you know what is wrong with it?
import React, { Component, PropTypes, } from 'react';
import Dropzone from 'react-dropzone';
import { reduxForm, Field } from 'redux-form';
const FILE_FIELD_NAME = 'files';
const renderDropzoneInput = (field) => {
const files = field.input.value;
return (
<div>
<Dropzone
name={field.name}
onDrop={(filesToUpload, e) => field.input.onChange(filesToUpload)}
>
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
{field.meta.touched &&
field.meta.error &&
<span className="error">{field.meta.error}</span>}
{files && Array.isArray(files) && (
<ul>
{ files.map((file, i) => <li key={i}>{file.name}</li>) }
</ul>
)}
</div>
);
};
export default renderDropzoneInput;
When importing:
import renderDropzoneInput from './images/render_dropzone_input';
My render method:
render() {
return (
<div>
{this.renderFields()}
<div>
<label htmlFor={FILE_FIELD_NAME}>Files</label>
<Field
name={FILE_FIELD_NAME}
component={renderDropzoneInput}
/>
</div>
</div>
);
}
}