filtering table rows on search makes the onClick not working

Question

I am facing this weird issue in my reactjs application. I am having an HTML table and I have a search bar which searches for whatever is entered in the bar, filters all the rows which have that searched term and then highlight it in these filtered rows. There is onkeyUp event attached to search input field. I have an onClick attached to all the rows.

Problem: When I search and then click on rows, the onClick doesn't work. When I click before I search anything, the onClick works.

Suspected Issue: Every time I search anything, on every onkeyup event, the table gets deleted completely and rebuilds with only the rows which have searched team in it. This might be taking away onclick method away from the new table which is built.

Here is my HTML and search function

 searchFunction() {


        var input, filter, table, tr, td, i;
        input = document.getElementById("search-table");
        var value = input.value



        filter = input.value.toUpperCase();
        table = document.getElementById("speech-table");
        table.innerHTML=bak;
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];
            var a1= td.getElementsByTagName("a")[0];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    var trimIndex=a1.innerHTML.toUpperCase().indexOf(filter);
                    var endIndex=trimIndex + filter.length + 3;
                    var output = [a1.innerHTML.slice(0, trimIndex), '<b>', a1.innerHTML.slice(trimIndex)].join('');
                    output = [output.slice(0, endIndex), '</b>', output.slice(endIndex)].join('');
                    a1.innerHTML=output;
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

    }

my search input and table html

input type="text" id="search-table" onChange={() => this.searchFunction()}
                               className="form-control search-sentances pull-right"
                               placeholder="Search"/>
                    </div>
                    <div className="panel-body scrollable no-pad-top-pad-bot2 sentance-scrollable">
                        <div className="subtitle-scroll">
                            <div className="tab-content">
                                <div className="tab-pane slide-left active" id="tab2sentancetable">
                            <table className="table sentance-table" id="speech-table">
                                <tbody>
                                {this.state.sentances_array.map((item, i) => (
                                    <tr key={item.id} id={item.id} onClick={() => this.sentance_click(item.time)}>
                                        <td className="edit-timing-sub"><span className="bold fs-12 text-success">{item.time.toFixed(2)}</span><br/>
                                            <span className="bold fs-12 text-success">{item.stopTime.toFixed(2)}</span>
                                        </td>
                                        <td>
                                            <EditableTextField name='username' value={item.words} onUpdate={this.handleRowUpdate} placeholder='Enter spoken words'/>
                                        </td>
                                        <td>
                                            <a href="#" className="text-danger fs-16"><span
                                                className="fa fa-pencil m-l-10"></span></a>
                                            <a href="#" className="text-danger fs-16"><span
                                                className="fa fa-trash m-l-10" onClick={()=>this.deleteRow(item.id)}></span></a>
                                        </td>
                                    </tr>
                                ))}


                                </tbody>
                            </table>

How can I make onClick work even after the search?

Answer 1

searchFunction(event) {
    let filterText = event.target.value;
    let outputArray = this.state.sentances_array.filter(el => {
      return item.words.indexOf(el) != -1;
    })

    this.setState({sentances_array: outputArray});
}

This is how should look your search function. Basically your are filtering your array when user type something and react rerenders table each time state changes.