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, 2022 in TypeSript by Logan
• 2,140 points
12,687 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>

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

answered Jun 9, 2022 by Nina
• 3,060 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, 2022 in TypeSript by Logan
• 2,140 points
741 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, 2022 in TypeSript by Nina
• 3,060 points
1,382 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,190 points
1,136 views
0 votes
1 answer
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, 2022 in Others by Rahul
• 9,670 points
17,139 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, 2022 in Others by narikkadan
• 63,420 points
1,868 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, 2022 in TypeSript by Nina
• 3,060 points
2,207 views
0 votes
1 answer

Angular 9 + CLI (TypeScript) - How to stop generating .spec.ts test files

If you're using v6 and need to ...READ MORE

answered Jun 13, 2022 in TypeSript by Nina
• 3,060 points
2,776 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP