Store the checked rows of table in an array

0 votes
asked Sep 11, 2017 by arbitb

I am mapping data to my table to populate it dynamically, in my reactJS application. Each row has a checkbox. I want to record the checked and unchecked rows of table. I have an array which stores the selected rows. How can I record the checked and unchecked event of a particular row. I know I have to assign a unique id to each row. But I am not able to make a specific row check and uncheck event getting fired. This is how I am doing it right now, but it doesn't uses unique id concept

This is my table

<table className="table table-hover table-condensed table-detailed"
                                       id="detailedTable" ref={node => this.table_el = node}>
                                    <thead>
                                    <tr>
                                        <th className="sorting_disabled wd-5p">
                                        </th>
                                        <th >Title</th>
                                        <th className="wd-15p">Channel</th>
                                        <th className="wd-10p">File Type</th>
                                        <th className="wd-15p">Uploaded</th>
                                        <th className="wd-20p">Process</th>
                                        <th className="wd-10p">Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {
                                        this.state.MediaFiles.map((item, i) => (
                                            <tr id={i}>
                                                <td className="v-align-middle">
                                                    <div className="checkbox">
                                                        <input type="checkbox" value="3" id={"checkbox1" + i}/>
                                                        <label htmlFor={"checkbox1" + i}
                                                               onClick={() => this.handleCheckboxClick(item.url, item.poster.list_thumbnail)}/>
                                                    </div>
                                                </td>
                                                <td className="v-align-middle semi-bold">

                                                    <div className='file-image'
                                                         style={{backgroundImage: `url('${item.poster.list_thumbnail}')`}}/>
                                                    <div className="movie-title">
                                                        <span className="movie-name"><a
                                                            onClick={this.showVideo(item.url, item.file, item.id, item.title, item.duration, item.height, item.width, item.frame_rate)}>{item.title}</a></span><br/>
                                                        <span className="movie-info">Movie Trailer</span>
                                                    </div>
                                                </td>
                                                <td className="v-align-middle">Zee Movies</td>
                                                <td className="v-align-middle">AVI</td>
                                                <td className="v-align-middle">11-11-2016</td>
                                                <td className="v-align-middle">
                                                    <a href="#" className="btn">Compliance - India</a><br/>
                                                    <a href="#" className="btn">Objects</a>
                                                    <a href="#" className="btn">Faces</a>
                                                </td>
                                                <td className="v-align-middle text-success"> {this.jobStatus(item.job_status)}</td>
                                            </tr>
                                        ))
                                    }
                                    </tbody>
                                </table>

This is my handleCheckbocClick function

handleCheckboxClick(file, image) {
        var that = this
        console.log('x');
        setTimeout(function () {
            if ($('.checkbox').find('input').is(":checked")) {
                console.log("checked")
                that.setState({
                    files_for_process: that.state.files_for_process.concat([file]),
                    selected_file_image: that.state.selected_file_image.concat([image])
                })
                console.log(that.state.selected_file_image)
                $('#hideatwill').removeClass('assign-wrap-hidden');
            } else {

                console.log('unchecked')
                $('#hideatwill').addClass('assign-wrap-hidden');
            }
        }, 5)
    }

But this code looks for whether any of the checkbox is checked or not. If yes, then it stores the value when a row is unselected also. For example: 6 rows are checked and now I uncheck any one of the 6 rows, then too the value of that uncheck row gets stored in state.files_for_process array.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...