hey guys i am doing a mini project in which i have to input fields one is row and the another one is column and i have button named create if i enter a value in both the fields and click create a empty table should be created. for example,if i give 3 in row input and 3 in column input the output should be 3*3 table please someone help with this
Are you trying to simulate the Google sheets way of putting tables. Just drag the number of columns or rows to render the table? In your case to enter the values.
This doesn't seem difficult, if you can show what you have done so far? I can help you with it.
Abdul Basit
MERN Stack Developer at Orange Fox Labs
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;