React - conditional rendering

0 votes
1,551 views
added May 15, 2019 in React by LC Marshal Captain (25,790 points)
edited May 16, 2019 by LC Marshal
<!--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>

 

13 Responses

0 votes
responded May 15, 2019 by LC Marshal Captain (25,790 points)
edited May 17, 2019 by LC Marshal
render() {
    const { data } = this.context;

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

 

0 votes
responded May 15, 2019 by LC Marshal Captain (25,790 points)
{
  (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> )
}

 

0 votes
responded May 15, 2019 by LC Marshal Captain (25,790 points)
edited May 16, 2019 by LC Marshal
{
  (!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 />
  )
}

 

0 votes
responded May 15, 2019 by LC Marshal Captain (25,790 points)
{
  (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> )
}

 

0 votes
responded May 15, 2019 by LC Marshal Captain (25,790 points)
edited May 16, 2019 by LC Marshal
{
  (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 )
}

 

0 votes
responded May 16, 2019 by LC Marshal Captain (25,790 points)
{
  (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 )
}

 

0 votes
responded May 16, 2019 by LC Marshal Captain (25,790 points)
{
  (buildingtypesdata) ? (
  buildingtypesdata.map(index => (
    <option value={index}>
      {
        (index.indexOf('|') !== -1) ? (
          `\u00A0\u00A0\u00A0\u00A0${index.split('|')[1]}`
        ) : (
          index
        )
      }
    </option>
  ))
  ) : ( <p /> )
}

 

0 votes
responded May 16, 2019 by LC Marshal Captain (25,790 points)
{
  (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>
  )
}

 

0 votes
responded May 16, 2019 by LC Marshal Captain (25,790 points)
{  
  (data) ? (
  <FormattedNumber value={data.total} />
  ) : ( null) 
}

 

0 votes
responded May 16, 2019 by LC Marshal Captain (25,790 points)
{
  (buildingtypesdata) ? (
  buildingtypesdata.map(index => (
    <option value={index}>
        {
        (index.indexOf('|') !== -1) ? (
            `\u00A0\u00A0\u00A0\u00A0${index.split('|')[1]}`
        ) : (
            index
        )
        }
    </option>
  ))
  ) : ( <p /> )
}

 

0 votes
responded May 17, 2019 by LC Marshal Captain (25,790 points)
{ 
  (((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 )
}

 

0 votes
responded Jul 17, 2019 by LC Marshal Captain (25,790 points)
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>

  )
}

 

0 votes
responded Mar 23, 2023 by lcjr First Warrant Officer (11,930 points)
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.

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