TypeScript - expected ts 1005

Question

I'm using Typescript in an React app with Graphql.

I'm getting an error:

',' expected.ts(1005)

The only answers I find say that typescript is out of date but I'm using 3.7.2

user@3df41 ~/Desktop/34534/client (master) $ tsc -v
Version 3.7.2
user@3df41 ~/Desktop/34534/client (master) $    

The error occurs here at line data.recipe.map(recipe =>

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 = () => {

  const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <div className="App">
      <ul>
        if(RecipeData.recipe !== null){
          {
            data.recipe.map(recipe =>
              <li>{recipe.name}</li>
            )
          }
        }
      </ul>
    </div>
  );
}

export default App;

package.json :

{
  "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": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

You can't put statements in JSX curly braces, only expressions. You can replace the if statement with an inline && expression.

  return (
    <div className="App">
      <ul>
        {
          RecipeData.recipe !== null && data.recipe.map(recipe =>
            <li>{recipe.name}</li>
          )
        }
      </ul>
    </div>

To know more about Angular, It's recommended to join Angular Course today.