CODEWITHSUNDEEP
javascriptandroidiosreact-nativereact-native-flatlist
Bhaumik Surani
Bhaumik Surani

Reputation: 1833

React Native FlatList Display Same Value For All Item

I'm Want to display Value on FlatList. That Flatlist is use common container for each item.

My Question:-

Why Display Same content for each item?
How To Solve it?

My Code:-

Main.js

renderItem({item, index}) {
        return <MyCommonView data={item} />
    }

render() {
        return (
        <View>
            <FlatList
            horizontal={true}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            renderItem={this.renderItem}
            data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}, {key: 'g'}, {key: 'h'}]} />
        </View>
        );
    }

MyCommonView.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';

var value;
class MyCommonView extends Component {
    constructor(props) {
      super(props);

      value=this.props.data.key;
    }
    render() {
        return (
        <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
            <Text>{value}</Text>
        </View>
        );
    }
}

export default MyCommonView;

Output:-

h h h h h h h h

enter image description here

My Needed Output:-

a b c d e f g h

Upvotes: 1

Views: 646

Answers (2)

Filipe
Filipe

Reputation: 884

I had no idea what you did was even possible! What you are doing is declaring a global variable inside MyCommonView. Therefore, the last time you change its value is on the last iteration (value.key = h). The correct way to do that would be to declare a local variable, in the scope of each MyCommonView component, as such:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class MyCommonView extends Component {
  constructor(props) {
    super(props);

    this.value = this.props.data.key;
  }
  render() {
    return (
      <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
        <Text>{value}</Text>
      </View>
    );
  }
}

export default MyCommonView;

But better yet, would be to use it directly:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class MyCommonView extends Component {
  render() {
    return (
      <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
        <Text>{this.props.data.key}</Text>
      </View>
    );
  }
}

export default MyCommonView;

And then you don't even need a class: You can use a functional component:

import React, {Component} from 'react';
import {View, Text} from 'react-native';

const MyCommonView = ({ data }) => (
  <View style={{margin:5, padding: 5, borderColor: '#000000', borderWidth: 1}}>
    <Text>{data.key}</Text>
  </View>
);

export default MyCommonView;

Upvotes: 1

Cristian S.
Cristian S.

Reputation: 973

The prop received in the child component is item and not data. 

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

And what you need to render is in the "MyCommonView" component ist just item.text

Upvotes: 0

Related Questions