React - conditional rendering

Question

<!--Inline If with Logical && Operator-->
<span>
  {
    (fieldTransactionSort == 'asc') ? (
      <img className="img-arrow" height="10" src={arrowdownIcon} alt="down" />
    ) : (
      <img className="img-arrow" height="10" src={arrowupIcon} alt="up" />
    )
  }
</span>

 

Answer 1

render() {
    const { data } = this.context;

return (
{
  (data) ? (
  <FormattedNumber value={data.total} />
  ) : ( null )
}

 

Answer 2

{
  (data && (this.context.LoginDetails === true) && data.totalpages > 0) ? (
    <th onClick={ () => { this.sortFieldTransaction(fieldTransactionSort) } } scope="col">
      <span className="sortField">Field Transactions</span>
      &nbsp;&nbsp;
      <span>
        {
          (fieldTransactionSort == 'asc') ? (
          <img className="img-arrow" height="10" src={arrowdownIcon} alt="down" />
          ) : (
          <img className="img-arrow" height="10" src={arrowupIcon} alt="up" />
          )
        }
      </span>
    </th>
  ) : ( <th scope="col">
  <span className="sortField">Field Transactions</span></th> )
}

 

Answer 3

{
  (!isLoadingQkF) ? (
    <div className="d-flex flex-row justify-content-between">
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={psf25th} /></b></p>
          <p className="block-sub-item">25th Psf</p>
        </span>
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={psfmedian} /></b></p>
          <p className="block-sub-item">Median Psf</p>
        </span>
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={psf75th} /></b></p>
          <p className="block-sub-item">75th Psf</p>
        </span>
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={price25th} /></b></p>
          <p className="block-sub-item">25th Price</p>
        </span>
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={pricemedian} /></b></p>
          <p className="block-sub-item">Median Price</p>
        </span>
        <span className="border quick-facts-block">
          <p className="block-item"><b>RM <FormattedNumber value={price75th} /></b></p>
          <p className="block-sub-item">75th Price</p>
      </span>
    </div>
  ) : (
  <QuickFactContentLoader />
  )
}

 

Answer 4

{
  (data && data.totalpages > 0) ? (
    <th onClick={ () => { this.sortFieldTransaction(fieldTransactionSort) } } scope="col">
      <span className="sortField">Field Transactions</span>
      &nbsp;&nbsp;
      <span>
        {
          (fieldTransactionSort == 'asc') ? (
          <img className="img-arrow" height="10" src={arrowdownIcon} alt="down" />
          ) : (
          <img className="img-arrow" height="10" src={arrowupIcon} alt="up" />
          )
        }
      </span>
    </th>
  ) : ( <th scope="col"><span className="sortField">Field Transactions</span></th> )
}

 

Answer 5

{
  (category && category === 'RESIDENTIAL') ? (
  <th scope="col" onClick={ () => {this.roomSort(room)}}>
  <span className="sortField">
    <span>Rooms</span>  
    <span>
    {
      (room == 'asc') ? (
        <img className="img-arrow" height="10" src={arrowdownIcon} alt="down" />
      ) : (
        <img className="img-arrow" height="10" src={arrowupIcon} alt="up" />
      )
    }
    </span>
  </span>
  </th>
  ) : ( null )
}

 

Answer 6

{
  (showArea) ? (
    <select value={area} onChange={this.handleAreaChange} className="form-control table-row">
    <option value="">All Areas</option>
      {
        (areadata) ? (
        areadata.map(index => (
          <option value={index.area}>{index.area}</option>
        ))
        ) : ( <p />)
      }
    </select>
  ) : ( null )
}

 

Answer 7

{
  (buildingtypesdata) ? (
  buildingtypesdata.map(index => (
    <option value={index}>
      {
        (index.indexOf('|') !== -1) ? (
          `\u00A0\u00A0\u00A0\u00A0${index.split('|')[1]}`
        ) : (
          index
        )
      }
    </option>
  ))
  ) : ( <p /> )
}

 

Answer 8

{
  (dataCount && dataCount.total && (parseInt(dataCount.total) > 0) && filterTotal) ? (
    (parseInt(dataCount.total) == 1) ? (
      <a className="btn btn-primary sharp" href="#" role="button" onClick={ this.filterTranssaction }>View {dataCount.total } Result</a>
    ) : (
      <a className="btn btn-primary sharp" href="#" role="button" onClick={ this.filterTranssaction }>View {dataCount.total } Results</a>
    )
  ) : (
    <a className="btn btn-primary sharp" href="#" role="button" onClick={ this.filterTranssaction }>Filter</a>
  )
}

 

Answer 9

{  
  (data) ? (
  <FormattedNumber value={data.total} />
  ) : ( null) 
}

 

Answer 10

{
  (buildingtypesdata) ? (
  buildingtypesdata.map(index => (
    <option value={index}>
        {
        (index.indexOf('|') !== -1) ? (
            `\u00A0\u00A0\u00A0\u00A0${index.split('|')[1]}`
        ) : (
            index
        )
        }
    </option>
  ))
  ) : ( <p /> )
}

 

Answer 11

{ 
  (((this.context.LoginDetails === false) && data && (data.total - 10) > 0)) ?  (
    <div className="default-user">
      <p>
        <b>
            <FormattedNumber value={data.total - 10} />
            {' '}
            more project available...
        </b>
      </p>
      <p>
        Shows only 10 projects and addresses are not disclosed. <a href="#" onClick={this.context.onShowLoginModal}>Log in</a> or
        {' '}
        <a href="#" onClick={this.context.onShowLoginModal}>Register</a>
        {' '}
        to view the full details of this area.
      </p>
    </div>
  ) : ( null )
}

 

Answer 12

render() {
  let {user, authenticated, loading} = this.props.store

  return (
    <div>
      {(loading) && screen.width > 768 && <DesktopHeaderPlaceholder { ...this.props.store }/>}
      {!loading && screen.width > 768 && <DesktopHeader { ...this.props.store }/>}
      {!loading && screen.width <= 768 && <MobileHeader { ...this.props.store }/>}
    </div>

  )
}