//This exercise using state for condition
class ResultsComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
filedTenure: 'asc',
value: 0,
message: 'default click state',
// state declare here
activeCol:'',
};
sortFieldTransaction = (fieldTransactionSort) => {
const { sortTransaction } = this.context;
let sortOrder = fieldTransactionSort;
sortOrder = (sortOrder === 'desc') ? 'asc' : 'desc';
sortTransaction('fieldtransactions', sortOrder);
this.setState({
fieldTransactionSort: sortOrder,
filedPrice: 'asc',
filedProject: 'asc',
filedTenure: 'asc',
filedPsf: 'asc',
// value for specific function state are vary
activeCol: 'fieldTransactionSort',
})
}
sortFieldTenure = (filedTenure) => {
const { sortTransaction } = this.context;
let sortOrder = filedTenure;
sortOrder = (sortOrder === 'desc') ? 'asc' : 'desc'
sortTransaction('tenure', sortOrder);
this.setState({
filedTenure: sortOrder,
filedPsf: 'asc',
filedProject: 'asc',
filedPrice: 'asc',
fieldTransactionSort: 'asc',
// value for specific function state are vary
activeCol: 'filedTenure',
});
}
render() {
// declare activeCol variable value
//it'll throw error if its not declare, ReferenceError: activeCol is not defined
const { filedTenure, filedProject, filedPrice, activeCol } = this.state;
return (
<th className="sortField cat-results-col-2" onClick={ () => { this.sortFieldTenure (filedTenure)} } scope="col">
<span className="sortField">Tenure / Type</span>
<span>
//condition: if this th column active,shw the icon, else hide it
{
(filedTenure == 'asc') ? (
<img className={(activeCol==='filedTenure') ? "img-arrow" : "d-none" } height="10" src={arrowdownIcon} alt="down" />
) : (
<img className={(activeCol==='filedTenure') ? "img-arrow" : "d-none" } height="10" src={arrowupIcon} alt="up" />
)
}
</span>
</th>
)