Hello friends, From now on we’re concentrating on basic questions of React Native JSX. So in today’s tutorial we would learn about how we can use If Else conditional statement inside return block in functional component. But here comes the rabbit from the hole, Functional component JSX syntax does not support directly If-Else conditions inside return() block. If we want to use If-Else then we have to make a custom component outside the return block then put our condition inside it. So in this tutorial we would learn about If Else Condition Inside React Native JSX Return Functional Component.
Contents in this project If Else Condition Inside React Native JSX Return Functional Component :
1. Open your project’s main App.js file and import useState, View, StyleSheet, Text, Button and SafeAreaView component.
|
1 2 3 |
import React, { useState } from “react”; import { View, StyleSheet, Text, Button, SafeAreaView } from ‘react-native’; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating 1 State named as text with State update method setText. We would use this State to True and False the If-Else condition.
|
1 |
const [text, setText] = useState(”); |
4. Creating a Component named as renderText(). In this component we would put the IF-Else conditional Statement and show different text on true and false condition.
|
1 2 3 4 5 6 7 8 |
const renderText = () => { if (text == true) { return <Text style={styleSheet.textStyle}> If Condition True </Text>; } else { return <Text style={styleSheet.textStyle}> If Condition False </Text>; } } |
5. Creating return() block, Here we would call our renderText component. Now we would make 2 Buttons. On each button we would set state value to True and False and this will directly impact to or condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> {renderText()} <Button onPress={() => setText(true)} title=‘Set If Condition True’ /> <View style={{ margin: 8 }} /> <Button onPress={() => setText(false)} title=‘Set If Condition False’ /> </View> </SafeAreaView> ); |
6. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, justifyContent: ‘center’ }, textStyle: { fontSize: 28, textAlign: ‘center’, color: ‘red’, padding: 10 } }); |
7. Complete Source Code for App.js file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React, { useState } from “react”; import { View, StyleSheet, Text, Button, SafeAreaView } from ‘react-native’; export default function App() { const [text, setText] = useState(”); const renderText = () => { if (text == true) { return <Text style={styleSheet.textStyle}> If Condition True </Text>; } else { return <Text style={styleSheet.textStyle}> If Condition False </Text>; } } return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> {renderText()} <Button onPress={() => setText(true)} title=‘Set If Condition True’ /> <View style={{ margin: 8 }} /> <Button onPress={() => setText(false)} title=‘Set If Condition False’ /> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, justifyContent: ‘center’ }, textStyle: { fontSize: 28, textAlign: ‘center’, color: ‘red’, padding: 10 } }); |
Screenshots :-
