how to delete a html tag element in react
const Row = function(props){ const {checked, value, onChange, onChecked} = props; return ( <div> <input type="checkbox" checked={checked} onChange={onChecked} /> <input type ="text" value={value} onChange={onChange}/> </div> ); } class App extends React.Component { constructor(props){ super(props); this.state = { rows: [ {value: 'row1', checked: false}, {value: 'row2', checked: true}, {value: 'row3', checked: false}, ] }; } updateValue = (e, idx) => { const rows = [...this.state.rows]; // copy array because we don't want to mutate the previous one rows[idx].value = e.target.value; this.setState({ rows, }); } onChecked = (idx) => { const rows = [...this.state.rows]; // copy array because we don't want to mutate the previous one rows[idx].checked = !rows[idx].checked; this.setState({ rows, }); } addRow = () => { const rows = [...this.state.rows, {value:'', checked: false} ]; this.setState({ rows, }); } deleteRows = () => { this.setState({ rows: this.state.rows.filter(e => !e.checked) }); } render(){ return( <div> {this.state.rows.map((row, idx) => { return( <Row key={idx} value={row.value} checked={row.checked} onChange={(e) => this.updateValue(e, idx)} onChecked={() => this.onChecked(idx)} /> ) }) } <button onClick={this.addRow}> add </button> <button onClick={this.deleteRows}> delete </button> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );