How to add row to table in ReactJS?

Question

JavaScript

Good day!
I decided to learn a little ReacJS. While I'm trying to create something like "dynamic tables", with simple functionality - add, delete a row.
The project was created via react-create-app (so as not to manually configure packers, Babel, etc.).
I more or less mastered the basics and managed to draw a table:
https://jsfiddle.net/69z2wepo/63374/ I
started looking for information on "dynamic inserts" (for English-language resources), but did not find anything useful. Somewhere something about refs, somewhere something about states, examples and methods are very scattered in implementations, and in general it is extremely difficult to understand something from them from the answers (if any).
The fact that I write in ES6 (through React.Component inheritance) also adds problems, and almost all examples that showed the functionality I needed were written through React.createClass, for example:
https://github.com/eajitesh/Hello- ReactJS/blob/mas...
In general, the question is: How to correctly add a row to the table (as well as any element to some place in the tree)?

Answer 1

If you want to change something in the current component, then use the state ( setState ).
If you want to change the child component, change the state of the current one ( setState ) and pass the changed data from the state ( state ) to the child component via props .
In your example, the root component is a Table , to which you pass props : head_names and rows . If you want to make it possible to add a new row to the Table , then you should make a container in which to place the Tableand a button (or other element) for adding new rows. In the state ( state ) of the container, you need to add head_names and rows , on the basis of which the table will be created.

class TableManagement extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      head_names: ['qwe0', 'qwe1'],
      rows: [
        [1, 2],
        [3, 4]
      ]
    };
  }  

  AddRow() {
    let newRows = this.state.rows;
    newRows.push([0, 0]);
    this.setState({rows: newRows});
  }

  render() {
    return (
      <div>
        <Table head={this.state.head_names} rows={this.state.rows} />
        <hr />
        <button onClick={ this.AddRow.bind(this) }>Add row</button>
      </div>
    );
  }
}

class Table extends React.Component {
  render() {
    return (
      <table>
        <thead>
          {this.genHead()}
        </thead>
        <tbody>
          {this.genRow()}
        </tbody>
      </table>
    );
  }

  genHead() {
    var head = this.props.head;

    return head.map(function(v, i) {
      return (
        <th key={'th' + i}>
          {v}
        </th>
      );
    });
  }

  genRow() {
    var rows = this.props.rows;

    return rows.map(function(v, i) {
      var tmp = v.map(function(v2, j) {
        return (
          <td key={'td' + i + '_' + j}>
            {v2}
          </td>
        );
      });

      return (
        <tr key={'tr' + i}>
          {tmp}
        </tr>
      )
    });
  }
}

ReactDOM.render(
  <TableManagement />,
  document.getElementById('root')
);

https://jsfiddle.net/m11x34fp/
During the development process, it is important to decide who will be dumb and who will be smart :-)
Dumb (simple) components are components that do nothing, just take properties and draw.
Smart components are able to manage the state, both their own and pass it on to their stupid offspring descendants :-)
If there are many components, and especially if there are many nested components, then the role of each component should be carefully considered. One smart component with lots of dumb nested components is the easiest option. If children are also smart and have to communicate with components of their level (siblings) or upper level (grandparents and above), then it will be difficult to organize interaction between components, there will be conflicts, unnecessary updates, in the worst case, looping. To solve problems of this magnitude, you can use state management libraries such as Redux , Flux , etc.

Answer 2

You should read the ReacJS manual for more details.