I want to add elements in array dynamically in following format

Question

I have two arrays, 1 column and 2 rows. I want to add rows array data to columns array dynamically as per shown in code. For time being i have taken hard coded values in these arrays i have one add button. Actually i want to render n*n matrix which has drop down buttons.

I have defined one method on add button and using for loop i pushed columns array to rows array.

import React, { Component } from "react";
import './Table.css';


export class Table extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columns: ['state 1', 'state 2', 'state 3', 'state 4', 'state 5', ''],
            emptyheader: [''],
            rows: [
                ['state 1', 'state 2', 'state 3', 'state 4', '', ''],
                ['state 2', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 3', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 4', 'state 2', 'state 3', 'state 4', ' ', ''],
                ['state 5', 'state 2', 'state 3', 'state 4', ' ', '']
            ],

            selectedTeam: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }

    render() {

        return (
            <div>

                <table align="center">
                    <tbody>
                        <tr>
                            {this.state.emptyheader.map((emptyheader, i) =>
                                <td >{emptyheader}</td>
                            )}
                            {this.state.columns.map((column, i) =>
                                <td >{column}</td>
                            )}
                        </tr>

                        {this.state.rows.map((row, i) =>
                            <tr key={i}>
                                {row.map((cell, i) =>
                                    (i < 1) ? (
                                        <td scope="row" key={i}>{cell}</td>
                                    ) : (
                                            <td>
                                                <select>
                                                    <option value="forward">Forward</option>
                                                    <option value="reverse">Reverse</option>
                                                    <option value="NA">NA</option>
                                                </select>
                                            </td>
                                        )
                                )}
                            </tr>
                        )}
                    </tbody>
                </table>


            </div>
        );
    }
}

export default Table;

I want to render n*n matrix

Can you add codesandbox example, where we can look and fix it? Because above code doesn't show handleChange. — Sandip Nirmal
– Sandip Nirmal, Commented Sep 13, 2019 at 5:06

Ishan Joshi · Accepted Answer · 2019-09-13 05:25:04Z

2

Can you show your handleChange method

I think it should be something like

this.handleChange = (e) => {
    let { rows } = this.state;
    rows.push(newElement);
    this.setState(rows);
}

answered Sep 13, 2019 at 5:25

Ishan Joshi

5253 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Soc · Accepted Answer · 2019-09-20 09:17:28Z

0

It's not very obvious what you are trying to do based on the question, but if you want to dynamically add rows and columns, try the following snippet. In particular look at the addColumn and addRow methods.

class Table extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: ['state 1', 'state 2', 'state 3', 'state 4', 'state 5', ''],
      emptyheader: [''],
      rows: [
        ['state 1', 'state 2', 'state 3', 'state 4', '', ''],
        ['state 2', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 3', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 4', 'state 2', 'state 3', 'state 4', ' ', ''],
        ['state 5', 'state 2', 'state 3', 'state 4', ' ', '']
      ],

      selectedTeam: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.addColumn = this.addColumn.bind(this)
    this.addRow = this.addRow.bind(this)
  }
  
  handleChange() {}
  
  addColumn() {
    const { columns, rows } = this.state;
    columns.push('');
    this.setState({ columns });
  }
  
  addRow() {
    const { rows } = this.state;
    rows.push([]);
    this.setState({ rows });
  }

  render() {
    const { rows, columns } = this.state;
    const displayRows = rows.map(row => [...row, ...new Array(columns.length - row.length)]);

    return (
      <div>
        <table align="center">
          <tbody>
            <tr>
              {this.state.emptyheader.map((emptyheader, i) =>
                <td >{emptyheader}</td>
              )}
              {this.state.columns.map((column, i) =>
                <td >{column}</td>
              )}
            </tr>

            {displayRows.map((row, i) =>
              <tr key={i}>
                {row.map((cell, j) =>
                  (j < 1) ? (
                    <td scope="row" key={j}>{cell}</td>
                  ) : (
                      <td>
                        <select disabled={i === j - 1}>
                          <option value="forward">Forward</option>
                          <option value="reverse">Reverse</option>
                          <option value="NA">NA</option>
                        </select>
                      </td>
                    )
                )}
              </tr>
            )}
          </tbody>
        </table>
        
        <button onClick={this.addColumn}>add column</button>
        <button onClick={this.addRow}>add row</button>

      </div>
    );
  }
}

ReactDOM.render(
  <Table />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

EDIT: Updated snippet to reflect @GS7's comment.

EDIT: Updated to disable diagonal drop down lists

edited Sep 20, 2019 at 9:17

answered Sep 13, 2019 at 6:01

Soc

7,8184 gold badges19 silver badges34 bronze badges

7 Comments

GS7 Over a year ago

how can i use only columns array to render n*n matrix? Suppose if i push another state to columns array i.e. state 6 then new row and new column should get added? how can i achieve this?

Soc Over a year ago

Do you mean without changing the state of rows? If so, you can compute the additional values in render.

GS7 Over a year ago

yes without changing the state of rows. but the values present in this rows array are not numeric these are string values and i will get this array through props. based on this array i want to render matrix in n*n form?

Soc Over a year ago

I've updated the snippet to calculate displayRows in the render method. Hope that helps.

GS7 Over a year ago

i have another issue: i want to disable diagonal drop down buttons. is it possible? i tried but couldn't find the solution.if u give the solution it will be very helpful.

|

Collectives™ on Stack Overflow

I want to add elements in array dynamically in following format

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related