score:0

well, you can basically map per row and it will be easier. don't forget to bind the methods in your constructor.

renderrow(el, i) {
    return <tr key={i}> {array(this.state.boardwidth).fill(1).map(this.rendercolumns)} </tr>
}

rendercolumn(el, j) {
    return <square key={j} />
}

render() {
    return {array(this.state.boardheight).fill(1).map(this.renderrow)
}

score:0

bad requirements

you should treat react component as view - to render state of given (passed as prop) array - not creating this during render methods/calls!

create an array at start (constructor) and use indexes of map functions to read "cells/fields".

you can use one linear array - length=width*height - single map function in render and use css/styling to wrap them in rows by square and board widths. board width can be precalculated in constructor (when not changed in lifecycle) - board width = boardwidth * square width - and passed in jsx.

of course you can use two map functions to create 2d board. it can be used for rendering using <table/> and <tr/><td> html structure or for performance reasons. with second option create separate component and pass part of data as prop - it (almost) doesn't matter if it will be a separate array (better) or range from linear array - internally row will be working on one simple array (and one map fn). it should depend on engine requirements.

look for inspirations here. you have simpler case - you don't have to return events/moves.


Related Query

More Query from same tag