title: Making a matrix of inputs from user defined inputs
body: <p>I am trying to do the following in React:</p>
  <ol>
  <li>User inputs rows and columns</li>
  <li>A grid is created in react of blank inputs, displayed as a grid with the correct dimensions.</li>
  </ol>
  <p>So far I have the following. Here I am assuming that the rows and columns that the user has input is 3 for both for brevity:</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
    // create a 3x3 matrix with some blank inputs as values values
    const matrix = Array.apply(null, Array(9)).map(function (x, i) {
      return &lt;input&gt;&lt;/input&gt;;
    });
  
    return &lt;div className=&quot;App&quot;&gt;{matrix}&lt;/div&gt;;
  }
  
  export default App;
  </code></pre>
  <p>Now this just gives me output that looks as follows:</p>
  <p><a href="https://i.stack.imgur.com/maBGL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/maBGL.png" alt="enter image description here" /></a></p>
  <p>Could someone please give me some ideas as to how can turn the above into a 3x3 grid? I want it to eventually adjust based on what row and column values that the user provides.</p>