Я пытаюсь сделать в React функции поиска и сортировки в таблице. Мои функции поиска работают нормально. Но когда я пытаюсь добавить функции сортировки в таблицу, вся функциональность становится сложной. Для поиска я использую текстовое поле поиска, а для сортировки - раскрывающийся список выбора. Сортировка на основе ключа answerStatus, сохраненного в файле JSON.
Пример живого кода (https://x1juu.csb.app/). CSS не включен.
Вот мой код компонента таблицы
import InquiresList from '../dashboard/inquiries/InquiriesList.json';
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())){
if(this.state.answerStatus === 'all')
{
return data;
}
else{
if(this.state.answerStatus === data.answerStatus)
{
return data;
}
}
}
return null;
})
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;
Пожалуйста помоги.