I'm currently using React and react-bootstrap-tables in my project and the documentation instructs me to use the following method:
createCustomExportCSVButton = (onClick) => {
return (
<ExportCSVButton
className="action button-gray smaller right"
btnText="Export CSV 2"
/>
);
}
However, I am getting an an unexpected token error:
ERROR in ./project/web/frontend/static/js/CyhyTable.js
Module build failed: SyntaxError: Unexpected token (67:29)
65 | }
66 |
> 67 | createCustomExportCSVButton = (onClick) => {
| ^
68 | return (
69 | <ExportCSVButton
70 | className="action button-gray smaller right"
I'm not familiar with this syntax, and everytime I try and google it the query seems to ignore the '=>' part so im not really sure what to call this type of function. I'm using webpack to compile the react frontend assets, could it be a problem with my webpack file?
var webpack = require('webpack');
module.exports = {
entry: [
"./project/web/frontend/static/bower_components/jquery/dist/jquery.min.js",
"./project/web/frontend/static/js/app.js",
"./project/web/frontend/static/js/flakes/base.js",
],
output: {
path: __dirname + '/project/web/frontend/static/js',
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
},
exclude: /node_modules/,
},
{test: /\.jsx$/, loader: 'jsx-loader'},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Here is the full CyhyTable JSX:
/* eslint max-len: 0 */
/* eslint no-unused-vars: 0 */
/* eslint no-alert: 0 */
var React = require('react');
var ReactDOM = require('react-dom');
var ReactBsTable = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;
var rowsSelected = []
function onRowSelect(row, isSelected, e) {
let rowStr = '';
for(const prop in row) {
rowStr += prop + ': "' + row[prop] + "'";
}
rowsSelected.push(row);
console.log(rowsSelected);
}
class CyhyTableSearch extends React.Component {
getValue() {
return ReactDOM.findDOMNode(this).value;
}
setValue(value) {
ReactDOM.findDOMNode(this).value = value;
}
render() {
return (
<div className="flakes-search">
<input
ref="searchInput"
className="search-box"
placeholder={ "Enter Value for Search.." }
defaultValue={ this.props.defaultValue }
onKeyUp={ this.props.search } />
<div className="flakes-actions-bar">
<button className="action button-gray smaller right"> DDI Selected</button>
<button name="csvExport" className="action button-gray smaller right">Export CSV</button>
</div>
</div>
);
}
}
class CyhyTable extends React.Component {
csvFormatter(cell, row) {
return `${row.id}: ${cell} USD`;
}
renderShowsTotal(start, to, total) {
return (
<div className="flakes-pagination-right"></div>
);
}
createCustomExportCSVButton = (onClick) => {
return (
<ExportCSVButton
className="action button-gray smaller right"
btnText="Export CSV 2"
/>
);
}
onExportToCSV(row) {
return rowsSelected;
}
render() {
const selectRowProp = {
mode: 'checkbox',
onSelect: onRowSelect
};
const options = {
clearSearch: false,
searchPanel: (props) => (<CyhyTableSearch { ...props }/>),
page: 1, // which page you want to show as default
sizePerPage: 25, // which size per page you want to locate as default
pageStartIndex: 0, // where to start counting the pages
paginationSize: 3, // the pagination bar size.
prePage: 'Prev', // Previous page button text
nextPage: 'Next', // Next page button text
firstPage: 'First', // First page button text
lastPage: 'Last', // Last page button text
onExportToCSV: this.onExportToCSV,
exportCSVText: 'test',
exportCSVBtn: this.createCustomExportCSVButton,
paginationShowsTotal: this.renderShowsTotal,
sizePerPageList: [ {
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: '15', value: 15
}, {
text: '25', value: 25
}, {
text: '50', value: 50
}, {
text: '100', value: 100
}, {
text: 'All', value: cyhyData.length
} ],
};
return (
<BootstrapTable
data={ cyhyData }
options={ options }
selectRow={ selectRowProp }
exportCSV={ true }
pagination={ true }
tableHeaderClass='flakes-table'
tableBodyClass='flakes-table'
containerClass='flakes-table'
tableContainerClass='flakes-table'
headerContainerClass='flakes-table'
bodyContainerClass='flakes-table'
search >
<TableHeaderColumn isKey={true} dataField='id' hidden={true}>id</TableHeaderColumn>
<TableHeaderColumn dataField='Severity'>Severity</TableHeaderColumn>
<TableHeaderColumn dataField='IP'>IP</TableHeaderColumn>
<TableHeaderColumn dataField='Port'>Port</TableHeaderColumn>
<TableHeaderColumn dataField='DNS'>DNS</TableHeaderColumn>
<TableHeaderColumn dataField='vulnName'>Vulnerability</TableHeaderColumn>
</BootstrapTable>
);
}
}
module.exports = CyhyTable;
