TypeScript - expected ts 1005

0 votes

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"
    ]
  }
}
Jun 8 in TypeSript by Logan
• 2,140 points
436 views

1 answer to this question.

0 votes

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>
answered Jun 9 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
0 answers

Typescript: Changing the definition of some third party types d.ts

I am a little bit lost how ...READ MORE

Jul 18 in TypeSript by Logan
• 2,140 points
8 views
0 votes
1 answer
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
64 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
508 views
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10 in Others by Rahul
• 9,000 points
1,089 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 11,280 points
688 views
0 votes
1 answer

Error TS1005: ';' expected. TypeScript for First Build error rxjs inside node_modules

 I investigated that rxjs released a new version: 6.4.0. And ...READ MORE

answered Jun 10 in TypeSript by Nina
• 3,020 points
594 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP