React Issues with Camper Leaderboard

React Issues with Camper Leaderboard
0.0 0

#1

I’m having a strange error whenever I run with webpack and babel with my Atom editor.
The error revolves around renderTable() method.

So building with webpack:

  constructor() {
    super();
    this.state = {
      topAllTime: [],
      top30Days: []
    }
    this.renderTable = this.renderTable.bind(this);
  }
  renderTable() {
    return (this.state.topAllTime.map((user, i) => {
      return (<tbody className='user-row'>
        <tr className='camper' key={user.id}>
          <th className='key'>{user.id}</th>
          <th className='username'><img src={user.img} style={styles.image}/> {user.username}</th>
          <th className='recent'>{user.recentPoints}</th>
          <th className='all-time'>{user.allTimePoints}</th>
        </tr>
      </tbody>)
    })
    );
  }

I get this error

If I want to bind with ES6 method like so:

 renderTable = ()=>{
    return ( this.state.topAllTime.map((user, i) => {
      return (<tbody className='user-row'>
        <tr className='camper' key={user.id}>
          <th className='key'>{user.id}</th>
          <th className='username'><img src={user.img} style={styles.image}/> {user.username}</th>
          <th className='recent'>{user.recentPoints}</th>
          <th className='all-time'>{user.allTimePoints}</th>
        </tr>
      </tbody>)
    })
    )
  }

I get unexpected token, when I’m sure this is correct.

And it did on https://codesandbox.io/s/7y3y1rppjq, works well and shows no errors.

I’m guessing it might be my webpack being weird, but everything looks right.

module.exports = {
  entry: "./app/App.js",

  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: /app/,
        loader: "babel",
        query: {
          presets: ["react", "es2015"]
        }
      }
    ]
  },
  devtool: "eval-source-map"
};

#2

Try just renderTable () { ...