0
181
ViewsUnexpected token '{'
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')
)
·
Juan Pablo Isaza
1 answers
Answer question0
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>
);
}
·
Juan Pablo Isaza
Report
Answer question