Ternary onPress button change color React Native

Question

I am using a ternary condition to change my react native button color when I press on it:

 backgroundColor: { present? "pink": "blue" }

However, when I do this, I get the following error:

SyntaxError: /home/chloe/Desktop/application/my-app/screens/Checkin/Items.js: Unexpected token, expected "," (88:156)

  86 |                                 <IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
  87 |                                 <View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
> 88 |                                     <Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
     |                                                                                                                                                             ^
  89 |                                     <Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
  90 |                                     <Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
  91 |                                 </View>

TransformError SyntaxError: /home/chloe/Desktop/application/my-app/screens/Checkin/Items.js: Unexpected token, expected "," (88:156)

  86 |                                 <IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
  87 |                                 <View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
> 88 |                                     <Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
     |                                                                                                                                                             ^
  89 |                                     <Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
  90 |                                     <Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
  91 |                                 </View>
- node_modules/react-native/Libraries/Utilities/HMRClient.js:326:31 in showCompileError
- node_modules/react-native/Libraries/Utilities/HMRClient.js:238:26 in client.on$argument_1
- node_modules/eventemitter3/index.js:181:21 in emit
- node_modules/metro/src/lib/bundle-modules/HMRClient.js:142:10 in _ws.onmessage
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/WebSocket/WebSocket.js:232:8 in _eventEmitter.addListener$argument_1
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

I do not understand what is the problem. This is the full part of the code:

<View>
                                <Image source={{ uri: item.image }} style={{ width: Dimensions.get("window").width, height: 200, marginBottom: 10 }} />
                                <Text style={{ position: "absolute", fontSize: 50, marginLeft: 20, color: 'white' }}>{item.name}</Text>
                                <IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
                                <View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
                                    <Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
                                    <Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
                                    <Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
                                </View>
                            </View>

And this is the update function :

   const update = (state) => {
        if (state == "present") {
            setPresent(!present)
        }
        console.log(present)
    }

And this is the initialization :

const [present, setPresent] = useState(false)

Answer 1

You don't need curly braces here:

// backgroundColor: { present? "pink": "blue" } <- Type Error

// Right syntax
backgroundColor: present? "pink": "blue"