How to loop through an object of arrays create views in react native?

Question

So I have an object like so,

Object{ 2017-08-01:Array(2), 2017-08-02:Array(1) }

I have used the following code, to iterate through it,

return Object.keys(this.state.visits).map(function(key, index){
            console.log(key);
            return (
                <View style={{height: 40, flexDirection: 'row'}}>
                    <Text style={{marginLeft: 10,marginTop: 10, fontWeight:'500'}}>{key}</Text>
                </View>
            );
        });

What happens is, this code, prints the 'key' perfectly in the console.log, but in the view, only the last date gets printed, and I also get an error in the console like so,

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of filename. See https://facebook.github.io/react/docs/lists-and-keys.html#keys for more information.

What I'm trying to achieve is as follows,

+-------------------------------------------------------------+
|                           Date1                             |
+-------------------------------------------------------------+
|                           Record 1                          |
+-------------------------------------------------------------+
|                           Record 2                          |
+-------------------------------------------------------------+


+-------------------------------------------------------------+
|                           Date 2                            |
+-------------------------------------------------------------+
|                           Record 1                          |
+-------------------------------------------------------------+

But I got stuck on the date part, so am not being able to proceed.

hyb175 · Accepted Answer · 2017-08-02 07:46:59Z

I suggest you taking a look at https://facebook.github.io/react-native/docs/sectionlist.html, which fits your need for a section based data set nicely.

<SectionList
  renderItem={({item}) => <ListItem title={item.title} />} // Your record component here.
  renderSectionHeader={({section}) => <H1 title={section.title} />} // Your date component here.
  sections={[ // homogenous rendering between sections
    {data: [...], title: ...},
    {data: [...], title: ...},
    {data: [...], title: ...},
  ]}
/>

The above works nicely if your list rows in your sections are very similar. You can also have different component for different sections by passing in a per-section renderItem method:

<SectionList
  sections={[ // heterogeneous rendering between sections
    {data: [...], title: ..., renderItem: ...},
    {data: [...], title: ..., renderItem: ...},
    {data: [...], title: ..., renderItem: ...},
  ]}
/>

Also, the warning about Each child in an array or iterator should have a unique "key" prop. is because you are essentially returning an array of similar data, and React wants you to pass an key prop to help it better identify the components when rendering and re-rendering. You should pass in a key prop as the root of your repeating components like this <View style={{ height: 40, flexDirection: 'row' }} key={key}>

Roy · Accepted Answer · 2017-08-02 08:01:51Z

1

You should give unique value to prop "key" inside <View />.

return Object.keys(this.state.visits).map(function(key, index){
            return (
                // Key prop
                <View key={key}>
                    <Text style={{marginLeft: 10,marginTop: 10, fontWeight:'500'}}>{key}</Text>
                    {func_record()} // return map for records
                </View>
            );
        });
...
render() {
     return (<View style={{ flex: 1 }}>
         {your_func_name()}
     </View>);
}

edited Aug 2, 2017 at 8:01

answered Aug 2, 2017 at 7:55

Roy

7368 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to loop through an object of arrays create views in react native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related