Rendering data in react native View using map function with nested ternary operator and filter fuction

I trying to render data inside rect native view using map function and inside map function there is ternary operator and inside ternary operator there is filter funtion, so the logic is like this:

   Categories.map(category => {
    
    
    
            if (category.type == 1) {
                console.log(category.category);
                console.log('Required');
                itemData.filter(product => product.menu_item_id === category.data_id).map(b => (
    
                    console.log("Name: ", b.name),
                    console.log("Price: ", b.price)
                ))
            } else {
                console.log(category.category);
                console.log('Optional');
                itemData.filter(product => product.menu_item_id === category.data_id).map(b => (
    
                    console.log("Name: ", b.name),
                    console.log("Prce: ", b.price)
                ))
            }
    
    
        })

However, when i try to implement the same thing within View element using ternary operator instead of if-else, I am getting syntax errors, which related to the ternary operator, this is the code that i am trying to do:

         <View>
                    {Categories.map(category => {
                         category.type === 0 ?

                            <View>
                                <Text> {category.category} </Text>
                                <View>
                                    <Text> Optional </Text>
                                </View>
                            </View>

                            { itemData.filter(product => product.menu_item_id === category.data_id).map(b => {
                                    <View key={b.id}>
                                        <View>
                                            <CheckBox
                                                disabled={false}
                                                value={checked[b.id]}
                                            />
                                            <Text>{b.name}</Text>
                                        </View>
                                        <View>
                                            <Text> $${b.price}</Text>
                                        </View>
                                    </View>
                                })
                            }
                       :
                    <View>
                        <Text> {category.category}  </Text>
                        <View>
                            <Text> REQUIRED </Text>
                        </View>
                    </View>
                    {itemData.filter(product => product.menu_item_id === category.data_id).map(b => {
                        <View >
                            <RadioButton.Group
                                key={b.id}
                                onValueChange={value => {  }} value={value}>
                                <View>
                                    <RadioButton.Item label={b.name}
                                        value={b}
                                    />
                                    <Text>RM {b.price}</Text>
                                </View>
                            </RadioButton.Group>
                        </View>
                    })
                    }
                })}
       </View >

Answer

You are missing parenthesis and return:

                 <View>
                    {Categories.map(category => {
                         return category.type === 0 ?

                            (
                            <>
                                <View>
                                <Text> {category.category} </Text>
                                <View>
                                    <Text> Optional </Text>
                                </View>
                            </View>

                            { itemData.filter(product => product.menu_item_id === category.data_id).map(b => {
                                    return (<View key={b.id}>
                                        <View>
                                            <CheckBox
                                                disabled={false}
                                                value={checked[b.id]}
                                            />
                                            <Text>{b.name}</Text>
                                        </View>
                                        <View>
                                            <Text> $${b.price}</Text>
                                        </View>
                                    </View>)
                                })
                            }</>)
                       :
                    (<><View>
                        <Text> {category.category}  </Text>
                        <View>
                            <Text> REQUIRED </Text>
                        </View>
                    </View>
                    {itemData.filter(product => product.menu_item_id === category.data_id).map(b => {
                        return (<View >
                            <RadioButton.Group
                                key={b.id}
                                onValueChange={value => {  }} value={value}>
                                <View>
                                    <RadioButton.Item label={b.name}
                                        value={b}
                                    />
                                    <Text>RM {b.price}</Text>
                                </View>
                            </RadioButton.Group>
                        </View>)
                    })
                    }</>)
                })}
       </View >