How to delete an entire row from html table using ReactJS? - reactjs

Question

I want to delete an entire row (text & button) from html table on button click. How can I do that using ReactJS instead of using simple JavaScript?
code:
var RecordsComponent = React.createClass({
render : function() {
return (
<div>
<table>
<tr>
<td>row 1</td>
<td><button onClick={deleteRow}>DELETE</button></td>
</tr>
<tr>
<td>row 2</td>
<td><button onClick={deleteRow}>DELETE</button></td>
</tr>
<tr>
<td}>row 3</td>
<td><button onClick={deleteRow}>DELETE</button></td>
</tr>
</table>
</div>
);
},
deleteRow : function() {
//how to delete row using ReactJS?
},
});
React.render(<RecordsComponent/>, document.getElementById('display'))

Answer 1

You should to know how to make a react components.
Below is one of example to delete items.
class RecordsComponent extends React.Component {
constructor() {
super();
this.state = {
rows: ['row 1', 'row 2', 'row 3'],
};
}
deleteRow = (index) => {
// make new rows. note: react state is immutable.
const newRows = this.state.rows.slice(0, index).concat(this.state.rows.slice(index + 1));
this.setState({
rows: newRows,
});
};
render() {
const rows = this.state.rows.map((row, index) => (
<tr key={row}>
<td>{row}</td>
<td><button onClick={() => { this.deleteRow(index); }}>DELETE</button></td>
</tr>
));
return (
<div>
<table>
{rows}
</table>
</div>
);
}
}