Unexpected token '{'

Question

my code looks fine to me but maybe you can find the error. thanks! in vscode, my code does not have an error but when I run it on google chrome, this error shows:

Uncaught SyntaxError: Unexpected token '{'

Context

popup.html

Stack Trace

popup.js:16 (anonymous function)

*and this part was highlighted *: <Button variant="outlined" onClick={textValueFn}>Play</Button>

import ReactDOM from 'react-dom';
import React, {useState} from 'react';

function App() {
  const [text, setText] = useState();
  let textValueFn = (event) => {
    const textValue = event.target.value;
    setText(textValue);
  };

  return (
    <div>
      <Input placeholder="Type in your text here" inputProps={ariaLabel} />
      <Button variant="outlined" onClick={textValueFn}> Play
      </Button>
      <h1>{text}</h1>
    </div>
  );
}



ReactDOM.render( <App/> ,
  document.getElementsByClassName('app')
)

Answer 1

Maybe the issue here is with ariaLabel prop which you're not passing to the component. And the second issue is with Input and Button components which you're not importing. If you're intended to use native input and button components then just replace Input with input and Button with button.

Here is the change I made in the code:

import React, { useState } from "react";

export default function App({ ariaLabel }) {
  const [text, setText] = useState();

  let textValueFn = (event) => {
    const textValue = event.target.value;
    setText(textValue);
  };

  return (
    <div>
      <input placeholder="Type in your text here" inputProps={ariaLabel} />
      <button variant="outlined" onClick={textValueFn}>
        Play
      </button>
      <h1>{text}</h1>
    </div>
  );
}