score:0
tl;dr
handlesubmit = (e) => e.preventdefault()
<form onsubmit={this.handlesubmit} />
why?
by default, an html form will make get request to the current uri on submit, see here. also by default, a button in a form will submit it:
http://codepen.io/levithomason/pen/rpewwp
<form onsubmit="alert('submitted!')">
<button>i'll submit</button>
<button>me too</button>
</form>
what is happening is, react is rendering a <form />
with some <button />
s inside of it and when you click them, it is making a get
request to the current uri with the form data.
going out on a limb, i bet your local server that is serving your app doesn't have a handler to accept this request. going further, i bet it also has a fallback that responds with the index.html
on unknown requests. this is commonplace for single page apps to allow the app's soft router to handle routing, rather than the server. this is probably causing your request for bundle.js
to actually receive the index.html
, hence the unexpected token.
since you've stated:
...if i don't use a form tag in above codes, it works fine...
simply preventing the form submit should solve it for you.
Source: stackoverflow.com
Related Query
- React form not submitting when using button nested inside Link tag
- React app with Typescript, Using generic spread expressions throw Unexpected token when trying to run the app
- When using webpack to compile React it returns Unexpected token (
- Unexpected token when using import type
- React onLoad event on image tag is not getting called when using conditional render
- Arrow function is considered unexpected token in React component using babel
- Jest encountered an unexpected token when working with React TypeScript
- React onSubmit handler on a form won't be called if I have a onBlur handler on an input? (Only happens when using Webstorm js debugger)
- Support callback for changing another field value when using React Hook Form validation
- Unexpected token "<" expected "{" when passing Interfaces to React Class Component
- Jest - encountered an unexpected token when using transform property
- Test suits failed with "SyntaxError: Unexpected token 'export" ' react typescript using jest
- Delete tag in uncontrolled "ChipInput" using react hook form
- S3 creating empty files when uploading a file from React contact form using Axios
- SyntaxError: Invalid or unexpected token when testing react application with babel and jest
- React SSR: SyntaxError: Invalid or unexpected token when importing image
- React Unexpected token 'export' when implementing serviceworker
- React.js 'Unexpected token' < when using form tag
- Unexpected token error when using Gulp babelify to process ReactJS JS file
- React Router - Uncaught SyntaxError: Unexpected token < when refreshing an URL with params
- Parsing error: Unexpected token when adding a conditional in react
- Dynamically add errors when using useFieldArray with React Hook Form
- Unable to edit form when loaded with values using Semantic UI React
- Unexpected token = (with espree parser in module mode) in my react project using sonar-scanner
- Syntax error: Unexpected token in react while importing an component using React.lazy() method
- Unexpected token when using multiple punctuations
- How to loop a component when I click a h3 tag in react using Hooks
- React comes back with an unexpected token error when I do a dynamic destructuring of my object
- Uncaught SyntaxError: Unexpected token '<' When using create-react-app develop mode
- How to convert a React Element from its Object form back to Tag form when printing
More Query from same tag
- PhoneInput value display in data preview in React
- Currently unable to display svg images from API in React app
- Pass data from component to action and saga using ARc/React/Redux
- How to display a button only if text overflows
- Counting characters from TextArea in ReactJs
- How can I type a generic component that takes as one of its arguments a function that returns an AxiosResponse?
- How can I test css properties for a React component using react-testing-library?
- Named exports with redux?
- How to select option in webpage using scrapy
- React Router v4 passing params to component
- React JS: How to send an event down the component tree?
- Compare previous state to new one in React Redux
- Type boolean is not assignable to type "team" in Filter function
- How to pass props (both states and functions) to the child router component
- Different action for a click event
- Is it possible to run Node and React in the same port?
- Material UI: How to use DatePickerDialog outside of DatePicker?
- redux-actions handleActions isn't changing the state
- React-Redux: How to add each item from array
- How to change responsive breakpoint values in MUI theme?
- Error: Invalid value of type string for mapStateToProps argument when connecting component ConnectedForm
- ReactJS Too many re-renders. React limits the number of renders to prevent an infinite loop
- Why does reducer return undefined when returning false?
- Tailwind CSS unnecessary whitespace
- How to change the style of a button when it is clicked in react using css?
- How can I initialize a class instance in a stateless function component in React?
- React passing onClick value from one class to another
- React Bootstrap - 'openModal' is not defined no-undef
- TestData doesn't work when try to filtering? React
- Is there an appropriate way to reuse Redux aware components?