CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-native
jack volten
jack volten

Reputation: 273

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

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?

Upvotes: 1

Views: 308

Answers (5)

codemonkey
codemonkey

Reputation: 7905

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>
   );

Upvotes: 0

SLePort
SLePort

Reputation: 15461

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

Upvotes: 0

Sarun UK
Sarun UK

Reputation: 6736

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>) }
   </>
   );

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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.

Upvotes: 4

Elisey
Elisey

Reputation: 147

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.

Upvotes: 0

Related Questions