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>

  )
}

 

Answer 13

import React, { useState } from 'react';

function Example() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  function handleLogout() {
    setIsLoggedIn(false);
  }

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <p>Welcome, you are logged in.</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please log in to continue.</p>
          <button onClick={handleLogin}>Login</button>
        </div>
      )}
    </div>
  );
}

 

In this example, the isLoggedIn state variable is used to determine whether to render the "Logged in" or "Please log in" message, as well as the corresponding login or logout button. When the user clicks the login or logout button, the handleLogin or handleLogout function is called, which updates the isLoggedIn state variable and triggers a re-render of the component with the updated content.