Passing a string to navigation.navigate - reactjs

Question

I'm trying to set a menu and I'm trying to pass the path to navigation.navigate as navigation.navigate(menu.path) but it doesn't allow me to pass the route in that way.
So I create the item here with the path as selections.name
export default function Menu_1({ navigation }) {
const [selections, setSelections] = useState([
{ title: 'Normas de utilización de la App', key:'1' , name:'Normas'},
{ title: 'Zonas maritimas', key:'2'}
])
When I try to pass that path to navigation.navigate it doesn't allow to me unless I use Navigation.navigate('Normas')
return (
<View style={globalStyles.container}>
<FlatList
data={selections}
renderItem={({ item })=>(
<TouchableOpacity onPress={() => navigation.navigate()}>
<Card>
<Image
style={{
width: 100,
height: 50,
}}
source={images.images_menu[item.key]} />
<Text style={globalStyles.titleCard}> {item.title} </Text>
</Card>
</TouchableOpacity>
)}
/>
</View>
)
}
is there a way to pass the string from selections.name to navigation.navigate?

Answer 1

If I understood this correctly, you can access the selections.name in the item param of your renderItem prop, like this:
return (
<View style={globalStyles.container}>
<FlatList
data={selections}
renderItem={({ item })=>(
<TouchableOpacity onPress={() => navigation.navigate(item.name)}> // item.name
<Card>
<Image
style={{
width: 100,
height: 50,
}}
source={images.images_menu[item.key]} />
<Text style={globalStyles.titleCard}> {item.title} </Text>
</Card>
</TouchableOpacity>
)}
/>
</View>
)
You can also switch this to whatever you want, navigate(item.key), navigate(item.foo). Just make sure you are keeping the values here
const [selections, setSelections] = useState([
{ title: 'Normas de utilización de la App', key:'1' , name:'Normas'},
{ title: 'Zonas maritimas', key:'2', name: 'Foo'} // missing name
])