react js flux implementation using redux gives an error: unexpected character '?' - reactjs

Question

I created a React simple flux project implemented using Redux.It was giving continuous errors, after fixing many of them it's giving an error in my App.jsx file.It's actually reading '⇒' character in my App.jsx file as '?'.
Here's my webpack.config.js file
module.exports = {
entry: './main.js',
mode: 'production',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
}
and here's my package.json
{
"name": "ReactApp1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0",
"save": "^2.3.2",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
}
}
Here's my App.jsx file
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'
import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'
class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props
return (
<div>
<AddTodo onAddClick = {text⇒dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
export default connect(select)(App);
and this is the error I got
ERROR in ./App.jsx
Module build failed: SyntaxError: C:/Users/Administrator/Desktop/ReactApp/App.js
x: Unexpected character '?' (15:39)
13 | return (
14 | <div>
> 15 | <AddTodo onAddClick = {text?dispatch(addTodo(text))} />
| ^
16 | <TodoList todos = {visibleTodos}/>
17 | </div>
18 | )
# ./main.js 13:11-31
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./main.js
i ?wdm?: Failed to compile.

Answer 1

Don't copy paste the code. Type by hand instead, so that you can avoid error like this:
<AddTodo onAddClick = {text⇒dispatch(addTodo(text))} />
// ^
It should be:
<AddTodo onAddClick = {text=>dispatch(addTodo(text))} />