Is there a way to display the content of an array - react-native

Question

I would like to display the content "product_id" from
the "products" array
I'm setting up a new component to view the product_id from the
products array.
Here the expectation is to display the contents of the array.
import { View, Text } from 'react-native'
import { Button, SpinnerButton } from '../../components'
import { inject, observer } from 'mobx-react/native'
import styles from './style'
import { calcSize } from '../../utils'
#inject('UserStore')
#observer
class ProductInfo extends Component {
constructor(props) {
super(props)
// this.state = {}
// this.item = this.props.navigation.state.item ? this.props.navigation.state.params.item : 'no item'
}
render() {
return (
<View style={styles.container}>
{this.props.navigation.state.params.item.products.map(pr => (
<Text>{pr.product_id}</Text>
))}
</View>
)
}
}
export default ProductInfo
here i send the param with the "ProductInfo" to the page above..
import { View, Text, FlatList, TouchableOpacity } from 'react-native'
import Style from './style'
import { inject, observer } from 'mobx-react/native'
import Icon from 'react-native-vector-icons/MaterialIcons'
import React, { Component } from 'react'
let mounted = false
#inject('UserStore', 'NavigationStore')
#observer
class DynamicList extends Component {
constructor(props) {
super(props)
this.state = {
data: props.data,
currentSearch: props.currentSearch,
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.state.data) {
this.setState({ data: nextProps.data, currentSearch: nextProps.currentSearch })
}
}
_renderSuggestion = ({ item, index }) => {
console.log('_renderSuggestion', item)
const splittedName = item.split(' ')
let splittedSearch = this.state.currentSearch.toUpperCase().split(' ')
splittedSearch = splittedSearch.map(x => x.trim()).filter(x => x.length > 1)
let suggestion = []
if (splittedSearch.length == 0) {
suggestion = splittedName.map((word, index) => <Text key={index}>{word} </Text>)
} else {
let highlightedWords = []
splittedName.forEach((word, index) =>
splittedSearch.forEach(wordFromSearch => {
const currentWord = word.toUpperCase()
const isAlreadyHighlighted = highlightedWords.includes(currentWord)
if ((currentWord.includes(wordFromSearch.toUpperCase()) && this.state.currentSearch.length > 0) || isAlreadyHighlighted) {
let v = (
<Text key={index} style={{ color: '#2eb872' }}>
{word}{' '}
</Text>
)
if (!isAlreadyHighlighted) {
highlightedWords.push(currentWord)
}
suggestion[index] = v
} else {
let v = <Text key={index}>{word} </Text>
suggestion[index] = v
}
})
)
}
return (
<TouchableOpacity
style={Style.suggestionView}
onPress={() => {
this.props.UserStore.addRecentSearch(item)
this.props.NavigationStore.navigate({ routeName: 'ProductInfo', params: { item } })
//this.props.NavigationStore.navigate({ routeName: 'SearchResult', params: { item: item } })
this.autoCompleteTimeout = setTimeout(() => {
if (mounted) this.setState({ showAutoComplete: false })
}, 400)
}}
>
<Icon name='search' size={20} style={{}} />
<Text style={{ marginLeft: 20, textAlign: 'left', color: '#9B999A' }}>{suggestion}</Text>
</TouchableOpacity>
)
}
render() {
console.log('data:', this.state.data)
return (
<View style={{ paddingVertical: 10 }}>
<FlatList initialNumToRender={20} data={this.state.data} keyExtractor={(item, index) => item.toString()} renderItem={this._renderSuggestion} keyboardShouldPersistTaps='always' />
</View>
)
}
}
let Results = props => {
console.log(props)
switch (props.navigation.state.key) {
case 'Products': {
let data = props.screenProps.data.suggestions.products.map(pr => pr.product_title)
return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
break
}
case 'Brands': {
let data = props.screenProps.data.suggestions.warehouses.map(pr => pr.warehouse_name)
return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
break
}
case 'Categories': {
let data = props.screenProps.data.suggestions.categories.map(pr => pr.categories)
return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
break
}
case 'UPC': {
let data = props.screenProps.data.suggestions.upcs.map(pr => pr.product_title)
return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
break
}
case 'Tags': {
let data = props.screenProps.data.suggestions.tags.map(pr => pr.product_title)
return <DynamicList data={data} currentSearch={props.screenProps.currentSearch} />
break
}
}
return <Text>Home</Text>
}
const TabNavigator = createMaterialTopTabNavigator(
{
Products: Results,
Brands: Results,
Categories: Results,
UPC: Results,
Tags: Results,
},
{
tabBarOptions: {
style: {
backgroundColor: 'black',
},
labelStyle: {
fontSize: 9,
margin: 0,
padding: 0,
fontFamily: 'Poppins-bold',
},
// etc
},
}
)
let f = Component => {
let r = props => {
// alert(props)
return <Component {...props} />
}
return r
}
export default createAppContainer(TabNavigator)
i want to press on item and it will show me the info of it on "ProductInfo"

Answer 1

You have not {} around the map. You also need to check props.screenProps.suggestions and props.screenProps.suggestions.products for null or undefined.
<View style={styles.container}>
{this.props.screenProps.suggestions.products.map(pr => <Text>{pr.product_id}</Text>)}
</View>
Please comment if you have any error when rendering.