React Typescript - ',' expected.ts(1005) - reactjs

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>