How to add a row to the table in ReactJS?

Good day!

I decided to study a little bit ReacJS. While trying to create something like "dynamic tables", with simple functionality -- add, delete row.

The project was created using react-create-app (to manually configure the packers, Babel, etc.).

The fundamentals more or less mastered, and got to draw a table:
https://jsfiddle.net/69z2wepo/63374/

Started looking for information on "dynamic inserts" (for English resources), but nothing useful found. Somewhere something about ref's somewhere something about state examples and methods are very divided on implementations, and indeed it is extremely difficult to understand what the responses (if any).
So the same problem adds to the fact that I write in ES6 (via inheritance React.Component), but almost all the examples that show my desired functionality is written using React.createClass, for example:
https://github.com/eajitesh/Hello-ReactJS/blob/mas...

In General, the question is: How to add row to the table (as well as any element in any location in the tree)?
July 2nd 19 at 14:01
2 answers
July 2nd 19 at 14:03
Solution
If you want to change something in the current component, use the state (setState).

If you want to change the child component, change the status of the current (setState) and pass the changed data from the state of (state) child component via props.

In your example, the root component Table, into which you pass the properties (props): head_names and rows. If you want to make the ability to add a new row in the Table, then you should make a container in which to put Table and button (or other element) to add new rows. In the condition (state) of the container will add head_names and rows, which will create a table.

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 (
 
<hr><button onclick="{" this.addrow.bind(this) }>Add row</button> ); } } class Table extends React.Component { render() { return ( <table head="{this.state.head_names}" rows="{this.state.rows}"> </table> {this.genHead()} {this.genRow()} <table> <thead></thead> <tbody></tbody> </table> ); } genHead() { var head = this.props.head; return head.map(function(v, i) { return ( {v} ); }); } genRow() { var rows = this.props.rows; return rows.map(function(v, i) { var tmp = v.map(function(v2, j) { return ( {v2} ); }); return ( {tmp} ) }); } } ReactDOM.render( <tablemanagement>, document.getElementById('root') );</tablemanagement>
https://jsfiddle.net/m11x34fp/

In the process of development, it is important to determine who is stupid and who is smart :-)

Stupid (simple) components are components that do nothing, just accept the properties and showing off.

Intelligent components are able to manage as our own and pass to his stupid offspring descendants :-)

If components a lot, and especially if you have many nested components, it is well to consider the role of each component. One smart component with a lot of stupid sub-components is the easiest option. If children will also be intelligent and will have to communicate with parts of your level (siblings) or upper level (grandparents, grandmothers, and above), to organize the interaction between the components will be difficult, there are conflicts, unnecessary updates in the worst case a loop. To solve problems of such magnitude can use the library manage the condition, such as Redux, Flux , etc.
And state by events or signals? - Elect commented on July 2nd 19 at 14:06
: state stores the state of the component. The state change is made by the method setState. If you change the state directly, to anything good it will not.

When you change state (setState) updates component: componentWillUpdate(), render() and componentDidUpdate().

The update can be disabled, if you define a method shouldComponentUpdate()returns false.

When mounting (creation) of a component occurs, another chain of calls: constructor(), componentWillMount(), render() and componentDidMount().

At the end of the life cycle - componentWillUnmount().

Read more about the condition:
https://facebook.github.io/react-native/docs/state.html

Life cycle:
https://facebook.github.io/react/docs/react-compon...

Children can communicate with parent via callback functions that are passed via properties.

Parents can create links to children (refs, attribute ref).
But you need to exercise caution, especially if you can't understand what React is and how it works. - Toney_Pur commented on July 2nd 19 at 14:09
July 2nd 19 at 14:05
You should detail read the manual for ReacJS

Find more questions by tags JavaScriptHTMLReact