I am pretty new to react native and coding in general. I need to render text based on some variables(see below).
if isPlayer === true && base.length === 1
, render x
else if isPlayer === true && base.length > 1
, render y
else render z
Below is the snippet of code I am working on and I have marked where I need to render the text. I have tried writing a function with if/else logic and then calling the function but have not got it to work. I know with JSX you can do conditional rendering inline but have not been able to get that to work either. Any and all help is appreciated! Thanks in advance!
<View style={{ marginTop: marginTopAdj, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
{IconWhiteBackButton}
</TouchableOpacity>
<HeaderTitle
containerStyle={styles.headerTitleContainer}
textStyle={{ color: '#fff' }}
>
{Item to be conditionally rendered}
</HeaderTitle>
</View>
<View style={{ marginTop: marginTopAdj, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
{IconWhiteBackButton}
</TouchableOpacity>
<HeaderTitle
containerStyle={styles.headerTitleContainer}
textStyle={{ color: '#fff' }}
>
{isPlayer === true && base.length === 1 && <ItemX/>}
{isPlayer === true && base.length > 1 && <ItemY/>}
</HeaderTitle>
</View>
For more complex logic create a new function:
renderItemConditionally = () => {
if (...) return <ItemX/>;
else if (...) return <ItemY/>;
else return <ItemZ/>;
}
Read this for further information.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다