0
181
VistasReact App works locally but getting Unexpected Token error in CodePen
I am working through a coding test for a job interview which is using codepen as the environment. I worked locally for past day and after copy pasting code into codepen I am getting Unexpected Token error at the render( <App />, document.getElementById('root')). I have triple checked to ensure it's not just a closed curly brace or something.
In my inspection tool under verbose (chrome) I am getting 25 [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See " They are for mouse-wheel events and on-touch etc which are not part of the application. Other sources say this is not a cause for concern. I'm sort of at a loss and hoping someone could provide some insight. Is codepen just not suitable for managing a reasonably complex React application which manages multiple states?
Chrome inspector suggests adding passive to event listeners, I have two assigned to a particular onChange event but have tried commenting out to see if it would solve the issue to no avail. How would I add this passive argument to a event listener via HTML. Only examples I've seen use it as such.
document.addEventListener('touchstart', onTouchStart, {passive: true})
Below is my onChange handler
<input
ref={donationAmountRef}
className="donation-input"
name="dollar-input"
type="text"
placeholder="$"
// onChange={(errorHandler, (e) => onChangeHandler(e))}
onChange={(e) => {
errorHandler();
onChangeHandler(e);
}}
></input>
Here is a picture of expected result. 
1 Respuestas
Responde la pregunta0
Ignore the [Violation] for now. Your problem is the Unexpected token, which suggests a syntax error preventing your code from compiling at all.
Something's wrong with your Button. If you say this is working locally then there's no way this is the same code that you're running.
const Button = (props) => {
const onClickHandler = () => {
const onClickHandler = () => {
props.setUserState({
...props.userState,
isDonating: true,
});
};
return (
<div className="button" onClick={onClickHandler}>
<p>Give Now!</p>
</div>
);
};
There are 4 opening curly braces and 3 closing braces. There's your syntax error, and the cause of the Unexpected token.
The Button component doesn't return anything - the only thing within it is onClickHandler. (And, inexplicably, onClickHandler contains another onClickHandler.)
I'm going to assume that something went wrong while copying your code into CodePen.