Daniel Daniel - 16 days ago 10
Javascript Question

How do I correct this react syntax error?

I am working on a practice application in reactjs and I am getting this error that I have been unable to figure out even with perusing through SO:

ERROR in ./App.js
Module build failed: SyntaxError: Unexpected token, expected , (6:13)

4 | render(){
5 | return (
> 6 | <li>{{this.props.name}}</li>
| ^
7 | )
8 | }
9 | }

@ ./main.js 11:11-27


These are the files:

webpack.config.js:

module.exports = {
entry: './main.js',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}


package.json:

{
"name": "react-test",
"version": "1.0.0",
"description": "react test application",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "Daniel Cortes",
"license": "ISC",
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
}
}


index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<style type='text/css'>
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid"></div>
<script src='index.js'></script>
</body>
</html>


App.js:

import React from 'react';
import ReactDOM from 'react-dom';
class Channel extends React.Component {
render(){
return (
<li>{{this.props.name}}</li>
)
}
}

export default Channel


main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './App';

ReactDOM.render(<Channel name='Hardware Support' />, document.getElementById('app'));

Answer

In App.js, simply pass the expression this.props.name rather than {this.props.name} as the desired value:

render(){
    return (
        <li>{this.props.name}</li>
    )
}