This is what I came up, the code can be improved, table will be created as soon you will input some values or state changes. Hope you will get the the idea...

class App extends Component {
   state = {
      rows: '',
      columns: '',
   }

   onChangeValues = (e) => {
      this.setState({
         [e.target.name]: e.target.value
      })
   }

   onSubmitForm = (e) => {
      e.preventDefault()
      this.setState({})
   }

   renderTable() {
      const rows = Array.from({ length: this.state.rows })
      const columns = Array.from({ length: this.state.columns })
      return rows.map((item, index) => {
         return (
            <tr key={index}>
               {columns.map((item, index) => {
                  return (
                     <td key={index} style={{ borderWidth: 1, borderStyle: 'solid', borderColor: '#dddddd' }}>{index}</td>
                  )
               })}
            </tr>
         )
      })
   }

   render() {
      const { rows, columns } = this.state
      return (
         <div>
            <form onSubmit={() => this.onSubmitForm}>
               <div>
                  <label htmlFor="rows">Rows</label>
                  <input type="number" name='rows'
                     value={rows} onChange={this.onChangeValues}
                  />
               </div>

               <div>
                  <label htmlFor="columns">Columns</label>
                  <input type="number" name='columns'
                     value={columns} onChange={this.onChangeValues}
                  />
               </div>

               <button>Create Table</button>
            </form>
            <table style={{ borderCollapse: 'collapse', width: '100%' }}>
               <tbody>
                  {this.renderTable()}
               </tbody>
            </table>
         </div>
      );
   }
}

export default App;

Abdul Basit

About

Available for

Abdul Basit's blogs

Search Hashnode

Abdul Basit

About

Available for

Abdul Basit's blogs