react native custom components using ternary operators

Question

I have a Perfectly working peace of code , But I want to write it using ternary Operators, I can't do it. Can I get Some help. I tried a form of having 2 returns inside a ternary Operator but it seems its not working. thanks.

import React from 'react';
import Card from './Card';

import { ScrollView, View, Text } from 'react-native';

const CardList = ({ list, onRemoveButton }) => {

  if (list.length === 0) {
    return(
      <View>
        <Text 
          style={{
            fontSize: 20,
            padding: 20,
            lineHeight: 30,
            textAlign: "center"
          }}
        >
        It seems like u have nothing to Do, Relax and Have fun</Text>
      </View>
    );
  } else {
    return(
      <ScrollView style={{paddingTop: 8}}>
      {
        list.map((text, i) => {
          return (
            <Card onRemoveButton={onRemoveButton} key={i} id={i} text={text} />
          );
        })
      }
    </ScrollView>
    );
  }
}

export default CardList

Update : Solved! I had to use return before Ternary Operator , which I didn't notice.

Answer 1

import React from 'react';
import Card from './Card';
import { ScrollView, View, Text } from 'react-native';

const CardList = ({ list, onRemoveButton }) => {
  return list.length ? ( // length > 0 is truthy
      <ScrollView style={{paddingTop: 8}}>
        {
          list.map((text, i) => {
            return (
              <Card onRemoveButton={onRemoveButton} key={i} id={i} text={text} />
            );
          })
        }
      </ScrollView>
    ) : (
      <View>
        <Text 
          style={{
            fontSize: 20,
            padding: 20,
            lineHeight: 30,
            textAlign: "center"
          }}
        >
          It seems like u have nothing to Do, Relax and Have fun</Text>
      </View>
    );
  }
}

export default CardList