Simple Tic-Tac-Toe game in React.js

I'm relatively new to react and attempted to create a simple Tic-Tac-Toe game. Would be great if i could get some feedback on this. Again, at this point using only React (no Redux).

main.js - main file which adds our App component to the DOM

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

document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(
    React.createElement(App),
    document.getElementById('mount')
  );
});

App.js - root component that contains the Board and Dashboard. One specific question I had here was: when I receive the reset() event from my Dashboard App, what's the best practice on how I can end up triggering the reset() of Board?

import React, { Component } from 'react';
import Board from './Board'
import Dashboard from './Dashboard'

export default class App extends Component {

    constructor(props) {
        super(props)

        this.state = {
            winner: ''
        }
    }

    reset() {
        console.log('how do i pass reset to Board...?')

    }

    hasWinner(winner) {
        this.setState({
            winner: winner
        })
    }

    render() {
        return (
            
                
                
            
        )
    }

}

Board.js - Board component that contains Cell components! Please ignore the checkWinner() method for the purpose of this review.

```
import React, { Component } from 'react';
import Cell from './Cell'
import styles from '../css/board.css'

export default class Board extends Component {

constructor(props) {
super(props)

let board = this.createBoard();

this.state = {
board: board,
currentPlayer: 'X'
}
}

createBoard() {
let board = new Array(this.props.rows);
for ( var row = 0 ; row
);
}
}
return board;
}

reset() {
let board = this.createBo

You have two options for handling the reset event.

-
If the Board component absolutely must handle its own logic for setting
its initial board state, you can add a ref prop to it, which allows you
to hold onto a reference to that instance of the component, and call
methods on that instance:

reset() {
  this.board.reset();
}
...
render() {
  return (
    
       { this.board = board; }} />
      
    
  )
}

-
Your second (and preferred) option is to "lift up" the board state from the
Board component. This is the approach that
is recommended over using a ref in the React documentation.
Essentially, you want to move your board state and the createBoard method from
the Board component to the App component.

A note on naming:

Your Board component's hasWinner prop sounds like it should be receiving a
boolean value, rather than a callback. A common convention in React is to prefix
callback props with "on," so your prop names could become onWin, onPlay, and
onReset, for example.

Finally, in your Dashboard component, instead of rendering an empty p tag when there is no winner, you can take advantage of the fact that React skips rendering values like false and null. So you can replace your ternary statement with something simpler:

const winner = this.props.winner && And the winner is: {this.props.winner}

StackExchange Code Review Q#152673, answer score: 2