The default prop for a nested object is not being displayed properly

Question

I want to have a default string for a nested prop within my component, but the following isn't showing the default value:

export default SuccessModal = ({ 
    completed, 
    setCompleted, 
    navigation, 
    isOpen, 
    setModal 
}) => {
    const { data, error } = completed && completed
    const onPressHandler = () => {
        setModal(false)
        navigation.navigate('Profile')
    }

    return (
        <View style={styles.container}>
            <Modal
                animationType="fade"
                transparent={false}
                visible={true}
                onRequestClose={() => {
                    Alert.alert('Modal has been closed.');
                }}>
                <View style={styles.modal}>
                    <View>
                        {error ? <Text style={styles.mainText}>Sorry, something went wrong!</Text> 
                               : <Text style={styles.mainText}>Your {data.createPost && data.createPost.title} has been posted!</Text>}

                        <TouchableHighlight
                            style={styles.button}
                            onPress={onPressHandler}>
                            <Text style={styles.buttonText}>Hide Modal</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

SuccessModal.propTypes = {
    completed: PropTypes.shape({
        data: PropTypes.shape({
            createPost: PropTypes.shape({
                title: PropTypes.string.isRequired
            })
        })
    }),
    setCompleted: PropTypes.func,
    navigation: PropTypes.object,
    isOpen: PropTypes.bool,
    setModal: PropTypes.func,
}

SuccessModal.defaultProps = {
    completed: {
        data: {
            createPost: {
                title: "post",
            }
        }
    }
}

I want the title nested inside the completed object to show "post", but when the component is rendered, the value doesn't show, but instead shows blank

Answer 1

You could always try to make it within the code using javascript evaluation like here:

<Text style={styles.mainText}>Your {(data.createPost && data.createPost.title) || "post"} has been posted!</Text>}