title: React Typescript - ',' expected.ts(1005)
body: <p>I'm using <code>Typescript</code> in an <code>React</code> app with <code>Graphql</code>.</p>
  
  <p>I'm getting an error:</p>
  
  <blockquote>
    <p>',' expected.ts(1005)</p>
  </blockquote>
  
  <p>The only answers I find say that typescript is out of date but I'm using 3.7.2</p>
  
  <pre><code>user@3df41 ~/Desktop/34534/client (master) $ tsc -v
  Version 3.7.2
  user@3df41 ~/Desktop/34534/client (master) $    
  </code></pre>
  
  <p>The error occurs here at line <code>data.recipe.map(recipe =&gt;</code>   </p>
  
  <pre><code>import React from 'react';
  import './App.css';
  
  import { useQuery } from 'react-apollo-hooks';
  import { GET_ALL_RECIPES } from '../queries';
  import { RecipeData } from '../generated/RecipeData';
  
  const App: React.FC = () =&gt; {
  
    const { data, loading } = useQuery&lt;RecipeData | null&gt;(GET_ALL_RECIPES, {
      suspend: false
    })
  
    if (loading || !data) return &lt;div&gt;Loading&lt;/div&gt;
  
    return (
      &lt;div className="App"&gt;
        &lt;ul&gt;
          if(RecipeData.recipe !== null){
            {
              data.recipe.map(recipe =&gt;
                &lt;li&gt;{recipe.name}&lt;/li&gt;
              )
            }
          }
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>package.json :</p>
  
  <pre><code>{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@types/jest": "24.0.23",
      "@types/node": "12.12.14",
      "@types/react": "16.9.13",
      "@types/react-dom": "16.9.4",
      "apollo": "^2.21.1",
      "apollo-boost": "^0.4.4",
      "apollo-cache-inmemory": "^1.6.3",
      "apollo-client": "^2.6.4",
      "apollo-link-http": "^1.5.16",
      "react": "^16.12.0",
      "react-apollo": "^3.1.3",
      "react-apollo-hooks": "^0.5.0",
      "react-dom": "^16.12.0",
      "react-router-dom": "^5.1.2",
      "react-scripts": "3.2.0",
      "typescript": "^3.7.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "apollo:generate": "apollo codegen:generate --target typescript --excludes=node_modules/* --includes=**/*.tsx --endpoint http://localhost:4000 --tagName=gql --outputFlat src/generated"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>