Alternative text if data is not available - react-native

Question

In React Native, how can I specify an alternative text to use if data is not available?
For example, in the following code, how would I specify to display "no skills, yet", if the skills array is empty?
<View>
<Text>
Skills
</Text>
<View>{
p.skills && p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
)
}</View>
</View>

Answer 1

You could either save the desired output in a variable before rendering:
let skillText = (<Text>{'no skills, yet'}</Text>);
if (p.skills && p.skills.length > 0) {
skillText = p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
);
}
...some more code...
<View>
<Text>
Skills
</Text>
<View>{ skillText }</View>
</View>
Or use a ternary directly in the jsx:
<View>
<Text>
Skills
</Text>
<View>{
(p.skills && p.skills.length > 0) ? p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
) : 'no skills, yet'
}</View>
</View>

Answer 2

First way (short one):
<View>
<Text>
Skills
</Text>
<View>
{
(p.skills && p.skills.length > 0) ? p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
) : (
<Text>no skills, yet</Text>
)
}
</View>
</View>
Second way: Extract the list rendering into a separate method
renderSkills = () => {
if (p.skills && p.skills.length > 0) {
return p.skills.map( skill =>
<Text key={skill}>
{ skill }
</Text>
)
} else {
return (
<Text>no skills, yet</Text>
)
}
}
render() {
return (
<View>
<Text>
Skills
</Text>
<View>
{this.renderSkills()}
</View>
</View>
)
}
PS: Please consider to use FlatList instead of rendering rows using Text (it helps a lot with performance)