CODEWITHSUNDEEP
javascriptreactjsreact-nativeuser-interfacefrontend
Jake Chambers
Jake Chambers

Reputation: 563

Which way is best for conditional rendering in React Native?

When conditionally rendering, would it be better to show and remove via display: none

<View style={{display: props.shouldShow ? 'flex':'none'}}>
     ......
</View>

OR

would it be better to call a function like so:


const showComponent = (props) => {
    if (props.shouldShow)
    {
        return (<View> ... </View)

    }
    else
    {
        return
    }

}
...
...
const Thingy = (props) => {
    return(
        <View>
            showComponent(props)
        </View>
    )
}

Upvotes: 3

Views: 2625

Answers (4)

David
David

Reputation: 133

From personal experience and react projects i have seen, An efficient / trusted way to conditionally render a component is

const showComponent = props.shouldShow ? (<View>...</View>) : null

return(
   <div>
      {showComponent}
   </div>

Upvotes: 2

Arvind Mandhare
Arvind Mandhare

Reputation: 61

If you are Using Functional Component, The latest Approach then its much more easy as,

return (
<View style={Condition ? Styles.A : Styles.B}>

</View>

)
const Styles = StyleSheet.create({ A: { display:"none" }, B:{ display:"flex" } } )

Rest you have to look into functional component

Upvotes: 1

Anthony
Anthony

Reputation: 89

The example you provided where you return the <View></View> or null is more idiomatic to react than toggling the style via display.

Upvotes: 2

Albin w&#228;rme
Albin w&#228;rme

Reputation: 261

If it's a matter of display or no display I usually fall back to ternary expressions.

render(){
  let display = ( ...some expression )
  return(
    display ? <View>Hello</View > : null
  );
}

Returning null will not render anything.

Upvotes: 2

Related Questions