我想在 react-native 中使用三元运算符我该如何修复我的代码？

Question

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

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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