dagda1 dagda1 - 18 days ago 10
React JSX Question

PropTypes eslint error with pure render function

I have the following pure render component:

import React, { PropTypes } from 'react';
import Dropzone from 'react-dropzone';

export const renderDropzone = ({ name, input: { onChange } }) => {
return (
<div>
<Dropzone
name={name}
onDrop={filesToUpload => onChange(filesToUpload)}
/>
<button type="button" className="button">Upload</button>
</div>
);
};

renderDropzone.PropTypes = {
name: PropTypes.string.isRequired,
input: PropTypes.object.isRequired
};


But I am getting the following error in eslint:

4:34 error 'name' is missing in props validation react/prop-types
4:40 error 'input' is missing in props validation react/prop-types

Answer

Just a typo:

renderDropzone.PropTypes = {
  name: PropTypes.string.isRequired
};

should be:

renderDropzone.propTypes = {
  name: PropTypes.string.isRequired
};

(lowercase 'p' on the class property)