Removing row from table results in TypeError

javascript, reactjs

Solution

Some browsers (tested with Firefox and Chrome) add automatically `<tbody>...</tbody>` tags to an HTML table that does not have them. Adding them in my Table component fix the issue:

render: function () {
    return (
      <table><tbody>
      {
        ... same code as before ...
      }
      </tbody></table>
     );

If you look at the html code generated by React, you can notice it adds some data attributes (`data-reactid`) to all the HTML tags rendered by a React component (to more info about data attribute in general: go here). Since the `<tbody>...</tbody>` tags was not from a React component, they did not have any `data-reactid` and these attributes help React to track DOM nodes.

Anyway, thank you to these people who talked about this issue. Here the link https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA.

More about `data-reactid`: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8.

Problem

I have a ReactJS HTML table component and I update its content (cell values) with the `setState` method. Here is the basic code: ``` var Cell = React.createClass({ render: function () { return (<td>{this.props.cellValue}</td>); } }); var Row = React.createClass({ render: function () { return (<tr>{this.props.row}</tr>); } }); var Table = React.createClass({ getInitialState: function() { return { data: this.props.data }; }, render: function () { return ( <table> { this.state.data.map(function(row) { var r = row.map(function(cell) { return <Cell cellValue={cell}/>; }); return (<Row row={r}/>); }) } </table> ); }}); ``` You would use it like this: ``` var initialData = [[1,2,3],[4,5,6],[7,8,9]]; var table = React.renderComponent( <Table data={initialData} />, document.getElementById('table') ); ``` This is working most of the time. I can change the data by doing this (somewhere in a function or whatever): ``` var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; table.setState({data : newData}); ``` As you can see, it adds one row to the end of the table. However, if I try to set the initial data after this update or in any way shorten the number of rows by setting `data` to a smaller array (e. g. `[[1, 2, 3], [4, 5, 6]]` which should remove the last row): ``` table.setState({data : initialData}); ``` I get this error: TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]); Where does it come from?

Original source