CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-flatlist
Jasur Kurbanov
Jasur Kurbanov

Reputation: 840

Function inside Flatlist RenderItem is not fully working

Problem is I cannot see {item.key} inside my function. When I type {item.key} itself inside flatlist render it is working. But inside function only {item.value} is showing. Can anyone explain to me why this happening ?

Sample Data

const orderResultJson = [
  {
    key: 'Скачайте приложение по ссылке',
    value: 'https://google.com'
  },
  {
    key: 'Логин',
    value: '879854'
  },
  {
    key: 'Пароль',
    value: '849846'
  },
];

My Function

function DetailsSection(item){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

Render 

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={orderResultJson}
          renderItem={({item}) => <DetailsSection {...item} />} 
          keyExtractor={item => item.key} 
        />
      </View>
    );
  }

Upvotes: 0

Views: 2292

Answers (2)

akhtarvahid
akhtarvahid

Reputation: 9769

function DetailsSection(props){
  return(
    <View>
      <Text>{props.item.key} + test</Text>
      <Text>{props.item.value}</Text>
    </View>
  )
}

Or

pass like this

<DetailsSection item={item} />

and access like this

function DetailsSection({ item }){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

because you are passing extracted value so directly you can access

Upvotes: 2

AvcS
AvcS

Reputation: 2323

Problem here is, when you are deconstructing item as individual props, the prop key will be considered as in built react prop key instead of considering it as an external prop.

So instead of deconstructing, pass item as is and access it from your function as it is.

My Function

function DetailsSection({ item }){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

Render

render() {
  return (
    <View style={styles.container}>
      <FlatList
        data={orderResultJson}
        renderItem={({item}) => <DetailsSection item={item} />} 
        keyExtractor={item => item.key} 
      />
    </View>
  );
}

Upvotes: 4

Related Questions