i want to use ternary operator in react-native how can i fix my code?

user_15078474 0
Viewed 110

hi i want to use ternary operator

if cookup has value i want to render

   <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />

but if cookup has a [] like this

enter image description here

i want to render

           <Hey>hiaaaaaa</Hey>

here is my code

  return (
    cookUp ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
   );

how can i do this?? how can i fix my code?

react-native reactjs node.js javascript
5 Answers

You can use the ListEmptyComponent prop in the flatlist

<FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
            ListEmptyComponent={<Hey>hiaaaaaa</Hey>}
        />

This will render the 'hiaaaaaa' when the data is empty. No need to go through the ternary operator.

user_14357220

Try something like this:

    return (
    { cookUp.length > 0 ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
    }
  )

Don't forget to youse {} when you're writing JS in JSX. Other is just JavaScript that you should probably dive into a bit deeper before frameworks.

user_151117500

Should be pretty straightforward:

  return (
    <Fragment>
     {cookUp.length ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
   }
   </Fragment>
   );
user_19279910

Try this approach,

cookUp is an empty array, so you have to check the length for verifying the data is empty.

return (
<>
    {cookUp?.length ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>) }
   </>
   );
user_33836930

An empty Array is true.

After checking cookUp is true you can use the isArray method on cookUp:

return (
    cookUp
      ? Array.isArray(cookUp)
        ? (
          <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
      ) 
      : ( < Hey > hiaaaaaa < /Hey>));
    : null

user_13449610
Related