/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

13 votes154 views1 answer
Round button corner right react native
Javascript React
158 votes580 views6 answers
React create app
Javascript React
32 votes173 views5 answers
React disable eslint errors
Javascript React
16 votes113 views1 answer
How to insern an image in react
Javascript React
0 vote153 views2 answers
Capitalize each word from string in react
Javascript React
0 vote177 views1 answer
How to run react build locally
Javascript React
0 vote162 views1 answer
React native scrollbar position issue
Javascript React
2 votes192 views2 answers
React 17
Javascript React
0 vote162 views1 answer
Google-maps-react give undefined lat long
Javascript React
27 votes181 views6 answers
React usestate
Javascript React