The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Conditional Rendering

Next ►
►

Conditional rendering in React Native works similarly to how conditions work in JavaScript. It allows you to render different UI elements or components based on certain conditions. This is a fundamental concept in React Native, enabling dynamic and interactive user interfaces.

Key Concepts

  1. JavaScript Conditional Statements:

    • if statements
    • Ternary operators
    • Logical && operator

  2. Conditional Rendering Techniques:

    • Inline if with logical && operator
    • Inline if-else with ternary operator
    • Using helper functions for complex conditions

Practical Examples

Example 1: Using if Statements

import React from 'react';
import { View, Text } from 'react-native';

const Greeting = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <Text>Welcome back!</Text>;
  } else {
    return <Text>Please log in.</Text>;
  }
};

const App = () => {
  return (
    <View>
      <Greeting isLoggedIn={true} />
    </View>
  );
};

export default App;

Explanation:

  • The Greeting component takes a prop isLoggedIn.
  • It uses an if statement to decide which message to render based on the value of isLoggedIn.

Example 2: Using Ternary Operator

import React from 'react';
import { View, Text } from 'react-native';

const Greeting = ({ isLoggedIn }) => (
  <Text>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</Text>
);

const App = () => {
  return (
    <View>
      <Greeting isLoggedIn={false} />
    </View>
  );
};

export default App;

Explanation:

  • The ternary operator ? : is used to render different messages based on the isLoggedIn prop.

Example 3: Using Logical && Operator

import React from 'react';
import { View, Text } from 'react-native';

const Notification = ({ hasNotification }) => (
  <View>
    {hasNotification && <Text>You have new notifications!</Text>}
  </View>
);

const App = () => {
  return (
    <View>
      <Notification hasNotification={true} />
    </View>
  );
};

export default App;

Explanation:

  • The logical && operator is used to conditionally render the Text component only if hasNotification is true.

Practical Exercise

Exercise: Conditional Rendering of a Button

Create a component that conditionally renders a button based on a prop isVisible.

Task:

  1. Create a ConditionalButton component.
  2. Use the isVisible prop to conditionally render a Button component.
  3. If isVisible is true, render the button with the title "Click Me".
  4. If isVisible is false, render a Text component with the message "Button is hidden".

Solution:

import React from 'react';
import { View, Button, Text } from 'react-native';

const ConditionalButton = ({ isVisible }) => (
  <View>
    {isVisible ? (
      <Button title="Click Me" onPress={() => alert('Button Pressed!')} />
    ) : (
      <Text>Button is hidden</Text>
    )}
  </View>
);

const App = () => {
  return (
    <View>
      <ConditionalButton isVisible={true} />
      <ConditionalButton isVisible={false} />
    </View>
  );
};

export default App;

Explanation:

  • The ConditionalButton component uses a ternary operator to decide whether to render the Button or the Text component based on the isVisible prop.

Common Mistakes and Tips

  • Mistake: Forgetting to return a component in an if statement.

    • Tip: Always ensure that each branch of your if statement returns a valid React component or null.

  • Mistake: Using complex logic directly in the render method.

    • Tip: For complex conditions, consider using helper functions to keep your render method clean and readable.

Conclusion

Conditional rendering is a powerful feature in React Native that allows you to create dynamic and interactive user interfaces. By mastering the use of if statements, ternary operators, and logical && operators, you can control what gets rendered based on the state or props of your components. Practice these techniques to become proficient in building responsive and user-friendly applications.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved