Fixing errors

As we have a linter set up, we can try it on one of the previous projects.

 I tried it on LoginForm.js from Example 9_ Controlled TextInput. Unfortunately, it listed a few errors:

$ yarn run lint
yarn run v1.5.1
$ ./node_modules/eslint/bin/eslint.js src

/Users/mateuszgrzesiukiewicz/Work/reactnativebook/src/Chapter 2: View patterns/Example 14: Linter/src/LoginForm.js
2:8 error A space is required after '{' object-curly-spacing
2:44 error A space is required before '}' object-curly-spacing
7:27 error 'initLogin' is missing in props validation react/prop-types
12:9 warning Unexpected console statement no-console
13:9 warning Unexpected console statement no-console
22:37 error Curly braces are unnecessary here react/jsx-curly-brace-presence
23:62 error A space is required after '{' object-curly-spacing
23:68 error A space is required before '}' object-curly-spacing
29:37 error Curly braces are unnecessary here react/jsx-curly-brace-presence
31:55 error A space is required after '{' object-curly-spacing
31:64 error A space is required before '}' object-curly-spacing
33:25 error Value must be omitted for boolean attributes react/jsx-boolean-value
49:20 error Unexpected trailing comma comma-dangle

13 problems (11 errors, 2 warnings)
10 errors, 0 warnings potentially fixable with the `--fix` option.

13 problems! Luckily, ESLint may attempt to fix them automatically. Let's try. Execute the following:

$ yarn run lint -- --fix

Lovely —we reduced the issues to just three:

7:27 error 'initLogin' is missing in props validation react/prop-types
12:9 warning Unexpected console statement no-console
13:9 warning Unexpected console statement no-console

We can skip the last two. Those warnings are relevant, but the console is handy for this book: it provides an easy way to print information. Do not use console.log in production. However, 'initLogin' is missing in props validation react/prop-types is a valid error, and we need to fix it:

LoginForm.propTypes = {
    initLogin: PropTypes.string
};

LoginForm now has its props validated. This will fix the linter error. To check this, rerun the linter. It looks like we have run into yet another issue! Correct:

error: propType "initLogin" is not required, but has no corresponding defaultProp declaration react/require-default-props

This is true—we should have defined default props in case initLogin is not provided:

LoginForm.defaultProps = {
    initLogin: ''
};

From now on, if we do not explicitly provide initLogin, it will be assigned a default value, that is, an empty string. Rerun the linter. It will now show a new error:

error 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies

At least it's an easy one. It correctly advises you to maintain prop-types dependencies explicitly.

Add the prop-types dependency by running the following command in your console:

yarn add prop-types

Rerun the linter. Great! Finally, there are  no errors. Good job.