React

by MuLtDirectX

HTML

<table>
<tbody id="app"></tbody>
</table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.cell{
  width:20px;
  height:20px;
  background: #fff;
}

React

class Table extends React.Component{
	contructor(props){
  	super(props)
    this.state = {
    	cellsamount: props.cellamount,
      rowsamount: props.rowsamount
    }
  }
  
  
  render(){
  	const rows = []
  	for (this.state.rowsamount) {
    	const cells = []
			for () {
      	cells.push(<Cell />)
      }
      rows.push(<Row>{cells}</Row>)
    }
    
    return <table><tbody>{rows}</tbody></table>
  }
  
  
}

class Row extends React.Component {
	render () {
   	return (
   		<tr className="row">
   		  {this.children}
   		</tr>
    )
  }  
}


class Cell extends React.Component{
	render(){
  	return <td className= "cell" />
  }
}

ReactDOM.render(<Table cellsamount="4" rowsamount="4" />, document.querySelector("#app"))