title: Display Multi Dimensional Arrays/Matrix using react
body: <p>I started React recently and I am stuck on a matrix issue. Columns and Rows are taken as input from the user and should display a matrix as output. Here is my code:</p>
  
  <pre><code>class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        array1 : [],
        array2 : [],
        col1: null,
        row1 : null,
  
      }
      this.handleCol1Change = this.handleCol1Change.bind(this);
      this.handleRow1Change = this.handleRow1Change.bind(this);
    }
  
    handleCol1Change(e){
      this.setState({
        col1 : e.target.value
      })
    }
  
    handleRow1Change(e){
      this.setState({
        row1 : e.target.value
      })
    }
  
    createarray1(){
      for(let i=0; i &lt; this.state.row1; i++){
        let row = []
        this.state.array1.push(row);
        for(let j=0; j &lt; this.state.col1; j++){
          let col = "1"
          this.state.array1.push(col);
        }
        return this.state.array1
      }
    }
  
    handleSubmit(){
      this.createarray1()
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h3&gt;Enter Dimensions&lt;/h3&gt;
          &lt;form&gt;
            &lt;h1&gt;Matrix 1&lt;/h1&gt;
            &lt;input placeholder="Columns" onChange={this.handleCol1Change}/&gt;
            &lt;input placeholder="Rows" onChange={this.handleRow1Change}/&gt;
  
            &lt;button type="submit" onSubmit={this.handleSubmit.bind(this)}&gt;Enter Dimensions&lt;/button&gt;
          &lt;/form&gt;
          {console.log("array",this.state.array1,"array2",this.state.array2)}
        &lt;/div&gt;
      );
    }
  } 
  </code></pre>
  
  <p>I believe the fault is in my create array logic. On <code>console.log</code> it shows that my array is not storing anything. Any ideas on what I'm doing wrong?
  TIA</p>