/Javascript/React/React native conditional rendering

React native conditional rendering

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

Source: reactjs.org

React if statement

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>
  );
}

Source: reactjs.org

Conditional Rendering in React js

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

Source: reactjs.org

Similar codes

0 vote303 views1 answer
How to run electron and react using concurrently
Javascript React
-1 vote172 views2 answers
React native font based on viewport dimensions
Javascript React
26 votes189 views6 answers
React redirect to url
Javascript React
15 votes141 views1 answer
Reducer in react example
Javascript React
0 vote181 views1 answer
Create a link in react js to download xcelfile
Javascript React
0 vote151 views1 answer
Javascript array filter duplicates in react
Javascript React
0 vote150 views1 answer
How we can set react select required
Javascript React
6 votes159 views2 answers
React native activity indicator
Javascript React
-1 vote140 views1 answer
Timestamp to unix time react
Javascript React
0 vote153 views2 answers
React date picker disable past dates
Javascript React