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.
CodePudding user response:
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.