React - using state

0 votes
112 views
added May 17, 2019 in React by LC Marshal Captain (25,770 points)
edited May 17, 2019 by LC Marshal
//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>
  )

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...