if-else statement inside jsx: ReactJS

by

As per DOC:

if-else statements don’t work inside JSX. This is because JSX is just
syntactic sugar for function calls and object construction.

Basic Rule:

JSX is fundamentally syntactic sugar. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. We can embed any JavaScript expression in JSX by wrapping it in curly braces.

But only expressions not statements, means directly we can not put any statement (if-else/switch/for) inside JSX.

If you want to render the element conditionally then use ternary operator, like this:

render() {
    return (   
        <View style={styles.container}>
            {this.state.value == 'news'? <Text>data</Text>: null }
        </View>
    )
}

Another option is, call a function from jsx and put all the if-else logic inside that, like this:

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}

More Related Contents:

  1. What is component in reactjs?
  2. How to create a translucent in React Native?
  3. ReactJS: Maximum update depth exceeded error
  4. React Native: require() with Dynamic String?
  5. Adding new data to firebase users
  6. What is the difference between React Native and React?
  7. Where can I make API call with hooks in react?
  8. How to register event with useEffect hooks?
  9. What is StrictMode in React?
  10. How can I force a component to re-render with hooks in React?
  11. React Native: Getting the position of an element
  12. How do I setState for nested object?
  13. Passing props into external stylesheet in React Native?
  14. When is it appropriate to use a constructor in REACT?
  15. What is prevState in ReactJS?
  16. How to prevent re-rendering of components that have not changed?
  17. React.createClass vs. ES6 arrow function
  18. Is it an anti-pattern to define a function component inside the render() function?
  19. React Native: Using lodash debounce
  20. unable to scroll in scrollView
  21. How to clear react-native cache?
  22. How to hide bottom navigation bar on a specific screen in react native?
  23. Do we still need functional setState way in react hooks?
  24. Global state in React Native
  25. How can I dispatch function in redux?
  26. stop dragging after a limit has reached
  27. Could not find “store” in either the context or props of “Connect(App)”
  28. React native – objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. React-native view auto width by text inside

Leave a Comment