mi código me parece bien, pero tal vez puedas encontrar el error. ¡Gracias! en vscode, mi código no tiene ningún error, pero cuando lo ejecuto en Google Chrome, aparece este error:
SyntaxError no detectada: fichas inesperado '{'
Contexto
ventana emergente.html
Rastreo de pila
popup.js:16 (función anónima)
*y esta parte se resaltó*: <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') )Tal vez el problema aquí es con ariaLabel prop que no está pasando al componente. Y el segundo problema es con los componentes Input y Button que no está importando. Si tiene la intención de usar componentes nativos de entrada y botón, simplemente reemplace Input con input y Button con button .
Aquí está el cambio que hice en el código:
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> ); }