React-Native Objects are not valid as a React child

Question

I have a somewhat todo list interface involving a shopping list which lets the user enter an item and the each item is displayed using a ScrollView being mapped by Array.map() I have given each item a unique key to each value however I keep getting the error 'Objects are not valid as a React child'. I'm trying to add each ingri to the ingriList and give it a unique id

The code:

const [ingriList, setIngriList] = useState([])
const [ingri, setIngri] = useState('')

const deleteItem = (ingriId) => {
    const filteredItems = ingriList.filter(ingri => ingri.id !== ingriId)
    setIngriList(filteredItems)
}

const handleSubmit = (ingriId , ingri) => {
    const newIngriList = ingriList.concat({ id: ingriId, val: ingri })
    return (
        setIngri(''),
        props.Item.length === 0
            ? <Text/>
            : setIngriList(newIngriList)
    )
}

return(
    <View style = { styles.ingriContainer }>
        <View style={styles.addPhotoCont}>
            <TextInput
                style={styles.textInput}
                placeholder={'Add Something'}
                onChangeText={item => setIngri(item)}
                value={ingri}
            />
        </View>
            <View>
                <TouchableOpacity onPress={() => handleSubmit(Date.now(), ingri)}>
                    <Text style={styles.addButton}>Add</Text>
                </TouchableOpacity>
            </View>
        <ScrollView>
            {ingriList.map(i =>
                (
                    <View>
                        <Text style={styles.ingridientValues}>{i}</Text>
                        <View style={styles.cancel}>
                            <TouchableOpacity onPress={() => deleteItem(ingriList.id)}>
                                <MaterialIcons name="cancel" size={30} color={Colors.orange} />
                            </TouchableOpacity>
                        </View>
                    </View>
                )
            )
            }
        </ScrollView>
    </View >
)

I would really appreciate it from the bottom of my heart if someone could help me with figuring out why I'm getting this error and what would be the appropriate way of adding each ingri to the ingriList so I can have a unique key to be able to use the deleteItem function to delete the selected item. Thank you in advance!!!!!

Answer 1

You are trying to show an object inside the Text component,

Try showing the value you set then it would work.

<Text style={styles.ingridientValues}>{i.val}</Text>