Filter data using select dropdown in react table

Question

I try to filter data of the table using one of the table values with the help of a select dropdown. I import all the table data using JSON. I somehow write some code to filter the data but it didn't work. Please help. What i want is when user select 'answered' option data with answered value shows while other hides and vice versa. Here is the sandbox link of the same(https://lndnf.csb.app/).

Here is the table component code.

 class Inquiry extends React.Component{
     constructor(props)
     {
        super(props);
         this.state={
             searchInquiries:null,
             answerStatus:'all'

         }
     }
     handleSearch=(event) =>
     {
       this.setState({searchInquiries:event.target.value});
     }
     handleAnswer=(event) =>
     {
         this.setState({answerStatus:event.target.value});
     }
     render()
     {
        const inquiries = InquiresList.filter((data)=>{
            if(this.state.searchInquiries == null)
            {
                return data;
            }
            else if(data.user_code.toLowerCase().includes(this.state.searchInquiries.toLowerCase())){
                        return data;
                }
            return null;
          })
          inquiries.filter((data) =>
          {
              if(this.state.answerStatus.toLowerCase() === 'all')
              {
                  return data;
              }
              else if(data.answered.toLowerCase()=== 'answered' && this.state.answerStatus.toLowerCase() === 'answered')
              {
                  return data;
              }
              else if(data.answered.toLowerCase()=== 'unanswered' && this.state.answerStatus.toLowerCase() === 'unanswered')
              {
                  return data;
              }
          })
         return(
            <div className="col-md-12 bg-gray" style={{padding:'30px'}}>
                <div className="row" style={row}>
                <h3 className="roboto paragraph mgb-30">Inquiries List</h3>
                </div>
                <div className="row border-radius-10 default-shadow" style={row}>
                <div className="col-md-12 bg-white border-radius-10" style={padding}>
                    <div className="row">
                    <div className="col-md-6 flex all-center">
                    <i className="i fa fa-search table-search-icon"></i>
                        <input type="text" onChange={this.handleSearch} className="form-control" style={{borderRadius:'30px'}} placeholder="Search" />
                    </div>
                    <div className="col-md-6 flex flex-end" style={row}>
            <select name="inquiry-filter" onChange={this.handleAnswer} className="inquiry-filter">
                <option value="all">All</option>
                <option value="answered">Answered</option>
                <option value="unanswered">Unanswered</option>
            </select>
            </div>
                    </div>

                </div>
                <div className="col-md-12 bg-white" style={{padding:'0px'}}>
                    <table className="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <td><p className="paragraph" style={marginBottom}>Created</p></td>
                                <td><p className="paragraph" style={marginBottom}>User Code</p></td>
                                <td><p className="paragraph" style={marginBottom}>Email</p></td>
                                <td><p className="paragraph" style={marginBottom}>Subject</p></td>
                                <td><p className="paragraph" style={marginBottom}>Answer</p></td>
                            </tr>
                        </thead>
                        <tbody>

                        {
                    inquiries.map(inquiry =>(
                        <tr>

                        <td>
                            <h3 className="paragraph">{inquiry.created_date}</h3>
                        </td>
                        <td>
                            <h3 className="paragraph" style={marginBottom}>{inquiry.user_code}</h3>

                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{inquiry.email}</p>
                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{inquiry.subject}</p>
                        </td>

                         <td>
                         <div className="custom-control custom-checkbox">
                             {
                              inquiry.answered ?   <input type="checkbox" checked className="custom-control-input" id={"answer-status-"+inquiry.id} name={"answer-status-"+inquiry.id} />
                              : <input type="checkbox" className="custom-control-input" id={"answer-status-"+inquiry.id} name={"answer-status-"+inquiry.id} /> 
                              }
                           <label className="custom-control-label" for={"answer-status-"+inquiry.id}></label>
                         </div>
                         </td>
                         </tr>

                    ))
                }

                        </tbody>
                    </table>
                </div>

            </div>
            </div>

         )
     }

 }


 export default Inquiry;

Vivek Doshi · Accepted Answer · 2020-05-12 11:51:12Z

1

I think you missed to assinged filtered data at last :

var inquiries = InquiresList.filter((data)=>{
              // your code for filter
          });

// filter will not modify the existing array, it returns updated array
// so you need to assign it, to get updated values
inquiries = inquiries.filter((data) =>  // <----------- HERE
{
     // your code for filter
})

WORKING DEMO :

edited May 12, 2020 at 11:51

answered May 12, 2020 at 11:42

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pranay kumar Over a year ago

Thanks. I don't know how I miss that.

Vivek Doshi Over a year ago

@Pranaykumar, it would be appreciated if you accept and upvote the answer.so others do know the question is already solved

Collectives™ on Stack Overflow

Filter data using select dropdown in react table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related