Im still learning ReactJS and Ive come across this obstacle.
Im trying to create tic tac toe game. Right now I want every cell of the game's board to have a different prop called 'number' which will be the element's ID and an onclick handler that will display the ID. For now, since Im still developing the idea, only one element got the number prop. For now I only get undefined My code looks like this:

```
var React = require('react');

var Plansza3x3 = React.createClass({
  toggleClick: function() {
    alert(this.props.number);
  },

  render: function() {

  return (
    <div className="parent">
    <div className="row">
      <div className="cell" number="3" onClick={this.toggleClick}></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
  </div>//parent
)//return
}//render
})//createClass

module.exports = Plansza3x3;

```

Also, Im not sure exactly when, but sometimes the onclick triggers itself on render. Could anybody explain why?

EDIT: I've tried to convert my code into ES6 as some of you adviced me to do. Also, while doing so I've thought of another conception which is that I create 9 objects in the Plansza3x3 state. Every object got its own fieldNumber (which would be the ID I want to display). Then on render inside div.parent I want to create 3 div.rows that will contain 3 div.cell each. As you can see I tried slicing the objects that contain information for div.cells into three parts with slice into an array with 3 elements, each one containin data for three div.cells. Then I wanted to map through all of them so I get three rows with three cells each. On render I get an error saying that there is an unexpected token and it points the for loop. The code:

```
var style = require('./Plansza3x3.css');

var React = require('react');

class Plansza3x3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardGameFields: [
                {fieldNumber: 1},
                {fieldNumber: 2},
                {fieldNumber: 3},
                {fieldNumber: 4},
                {fieldNumber: 5},
                {fieldNumber: 6},
                {fieldNumber: 7},
                {fieldNumber: 8},
                {fieldNumber: 9}
            ]
        }
    }
    render () {
        return (
            <div className="parent">
                {
                    for(var i = 0; i = 2; i++) {
                        <div className="row">
                            {var currentRowFieldsArray = this.state.boardGameFields.slice(3*i, (3*i)+1, (3*i)+2);
                                currentRowFieldsArray.map(currentField =>
                                    <div className="cell" key={currentField.fieldNumber} fieldNumber={currentField.fieldNumber} onClick={e => alert(e.target.fieldNumber)}></div>
                                )//map
                            }
                        </div>//row
                    }//for
                }
            </div>//parent
        )//return
    }//render
}//class

export default Plansza3x3;

```