I am working my way through version 3 of the `Complete Intro to React` course and when it came to the Flow chapter (integrating Types to JS and React) I had a lot of problems getting Flow to work.
It turned out to be mainly a versioning issue between `flow` and `flow-typed` (and their repos containing the type definitions).

**I have resolved these issues** by upgrading both flow (or rather `flow-bin`) and `flow-typed` to a recent version, and using the new Flow syntax.

I wanted to share my solution so anyone working through the course now could hopefully save some time. Also I used VSCode rather than Sublime, so if you have any questions on how to integrate Flow with VSCode, let me know!

### Here is what I did:

First remove flow and flow-typed:
`$ yarn remove flow-bin flow-typed flow`

then install it again as a developer dependency:
`$ yarn add --dev flow-bin flow-typed`

You can check the new versions are installed in `package.json` under `dev`:
```
"devDependencies": {
[...]
"flow-bin": "^0.77.0",
"flow-typed": "^2.5.1",
```
**Note**: Depending on when you run the commands these version numbers may be higher than what I have here.

Now follow the course along (Flow chapter), to setup (`yarn flow init`) and get the type definitions (`yarn flow-typed install`) and check you added the `styledcomponents` to the `[ignored]` and `[libs]` section in the .flowconfig.

Ie. your `.flowconfig` file looks like this:

```
[ignore]
/node_modules/styled-components/*

[include]

[libs]
styled-components

[lints]

[options]

[strict]
```

Now you will still get errors when you add the flow annotation (`// @flow`) to the `Search.jsx` page. This is because you are now using a new version of Flow, and they updated their syntax. To read up on some differences check out these resources:
- [React Components + Flow Types](https://flow.org/en/docs/react/components/)
- [React Events + Flow types](https://flow.org/en/docs/react/events/)

Implementing the new syntax your `Search.jsx` file will look like this now:

```
// @flow

import * as React from 'react';
import preload from '../data.json';
import ShowCard from './ShowCard';

type State = {
searchTerm: string
};

class Search extends React.Component {
state = {
searchTerm: ''
};

handleSearchTermChange = (
event: SyntheticKeyboardEvent
) => {
this.setState({ searchTerm: event.currentTarget.value });
};

render() {
return (

export default Search;

```