4

Exact image of error.

I am not sure why this happens in my visual studio code environment.

import React from 'react';
import {
    AppBar,
    ToolBar,
    Typography,
} from '@material-ui/core';

const AppHeader = () => {
    `<AppBar position="static"></AppBar>`
}

Also this is a standard react app. I just used the create-react-app and ran yarn start then I went into the src folder and made a file called AppHeader.js and typed that line of code into it. I am running all the latest versions by the way.

FK82
  • 4,907
  • 4
  • 29
  • 42
adarian
  • 334
  • 7
  • 24
  • 1
    Try removing the braces or putting a return statement inside the braces and before the JSX code in `AppHeader`: const AppHeader = `() => \`\`;` or `const AppHeader = () => { return \`\`; }`. Do note that you are returning a string and not a component. – FK82 Jul 27 '18 at 20:13
  • adding a semicolon to the end did not work nor did the return statement – adarian Jul 27 '18 at 20:18
  • What are you trying to do? What is the point in defining a function that has a string in it? – Yossi Jul 27 '18 at 20:20

1 Answers1

3

Your AppHeader function is incorrect. Since you are using an arrow function with curly braces, you must include the keyword return for the component to be used.

simply change it to

const AppHeader = () => (
  <AppBar position="static"></AppBar>
);

to fix your issue. Note the parens instead of curly braces, and the trailing semicolon.

AnilRedshift
  • 7,937
  • 7
  • 35
  • 59
  • This worked to fix the AppBar but then when I added some more code I got a new error within the same part. `const AppHeader = () => ( Okta CRUD React App )` the error says `unclosed regular expression` and starts at the front of the closing tag `` – adarian Jul 27 '18 at 20:19
  • @adarian You need to parse your JSX code into javascript. Try this: https://stackoverflow.com/questions/32832264/change-language-to-jsx-in-visual-studio-code#37592711 – AnilRedshift Jul 27 '18 at 20:22
  • I just edited the settings.json file in my user workspace with the following code and nothing changed. `// Place your settings in this file to overwrite the default settings { "files.associations": { "*.js": "javascriptreact" } }` – adarian Jul 27 '18 at 20:28
  • @adarian if you're still having issues, consider asking a new question – AnilRedshift Jul 27 '18 at 20:35