Styjun

Is there a name for the trope when there is a moments dialogue when someone pauses just before they leave the room?

Do I have to explain the mechanical superiority of the player-character within the fiction of the game?

Boss wants someone else to lead a project based on the idea I presented to him

What is the most suitable position for a bishop here?

Resistance between non-inverting input of op-amp and voltage source

Is the specular reflection on a polished gold sphere white or gold in colour?

What is the oldest commercial MS-DOS program that can run on modern versions of Windows without third-party software?

Is the continuity test limit resistance of a multimeter standard?

Greeting with "Ho"

Subtract the Folded Matrix

Are there any individual aliens that have gained superpowers in the Marvel universe?

Cut the gold chain

Why don't we have a weaning party like Avraham did?

Why does Linux list NVMe drives as /dev/nvme0 instead of /dev/sda?

What was the first third-party commercial application for MS-DOS?

Improve appearance of the table in Latex

How did the Vostok ejection seat safely eject an astronaut from a sealed space capsule?

What mathematical theory is required for high frequency trading?

Why is it easier to balance a non-moving bike standing up than sitting down?

Syntax and semantics of XDV commands (XeTeX)

How does DC work with natural 20?

Find the common ancestor between two nodes of a tree

What is the "ls" directory in my home directory?

How can I ping multiple IP addresses at the same time?

Unable to loop and render FlatList inside .map function react-native

JavaScript closure inside loops – simple practical exampleLoop inside React JSXWhat is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?React Native ScrollView/FlatList not scrollingReact Native FlatList horizontal paging TouchableOpacity scrollToIndex infinite loopElements inside ScrollView dont scroll React nativeReact-Native FlatList doest not scroll on AndroidNot able to navigate to other page in react nativeReact-Native Flatlist not rendering when record is single

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I am trying to render a FlatList inside a component. The Component itself is inside a ScrollView.

I am using map function to loop through the data to pass into the component.
Earlier I was using ScrollView instead of FlatList. It was working fine, but was rendering slow. So I decided to use FlatList.

Here's my code:

 renderComp()

 const filtersView,cats,cats_title, clearStyle = styles;

 const data = this.props.ingreds;

 const arr = Object.entries(data);


 return arr.map(i=> 
 const name= i[0]; 
 const items_obj = i[1];
 const items = Object.values(items_obj);

 return(

 <View key=name style= filtersView>

 <View style=cats>

 <Text style =cats_title>name</Text>

 <Text style=clearStyle>Clear All</Text>
 </View>


 <View style=justifyContent:'flex-start', alignItems:'flex-start'>

 <FlatList 
 style= marginRight:6 
 data=items
 keyExtractor=(x,i)=> i.toString()
 renderItem=(item) =>
 this.renderItems(item)
 
 />
 </View> 
 </View>

 )
 )

 

And here's the ScrollView Component:

 <ScrollView contentContainerStyle=alignItems:'flex-start', 
 justifyContent:'flex-start',flex:1, height:72 >

 this.renderComp()

 </ScrollView>

And The loop stops after one iteration.

Here's the output: https://i.stack.imgur.com/yM151.png

Any suggestions?

javascript react-native react-native-flatlist

share|improve this question

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

add a comment | 

1

I am trying to render a FlatList inside a component. The Component itself is inside a ScrollView.

I am using map function to loop through the data to pass into the component.
Earlier I was using ScrollView instead of FlatList. It was working fine, but was rendering slow. So I decided to use FlatList.

Here's my code:

 renderComp()

 const filtersView,cats,cats_title, clearStyle = styles;

 const data = this.props.ingreds;

 const arr = Object.entries(data);


 return arr.map(i=> 
 const name= i[0]; 
 const items_obj = i[1];
 const items = Object.values(items_obj);

 return(

 <View key=name style= filtersView>

 <View style=cats>

 <Text style =cats_title>name</Text>

 <Text style=clearStyle>Clear All</Text>
 </View>


 <View style=justifyContent:'flex-start', alignItems:'flex-start'>

 <FlatList 
 style= marginRight:6 
 data=items
 keyExtractor=(x,i)=> i.toString()
 renderItem=(item) =>
 this.renderItems(item)
 
 />
 </View> 
 </View>

 )
 )

 

And here's the ScrollView Component:

 <ScrollView contentContainerStyle=alignItems:'flex-start', 
 justifyContent:'flex-start',flex:1, height:72 >

 this.renderComp()

 </ScrollView>

And The loop stops after one iteration.

Here's the output: https://i.stack.imgur.com/yM151.png

Any suggestions?

javascript react-native react-native-flatlist

share|improve this question

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

add a comment | 

I am trying to render a FlatList inside a component. The Component itself is inside a ScrollView.

I am using map function to loop through the data to pass into the component.
Earlier I was using ScrollView instead of FlatList. It was working fine, but was rendering slow. So I decided to use FlatList.

Here's my code:

 renderComp()

 const filtersView,cats,cats_title, clearStyle = styles;

 const data = this.props.ingreds;

 const arr = Object.entries(data);


 return arr.map(i=> 
 const name= i[0]; 
 const items_obj = i[1];
 const items = Object.values(items_obj);

 return(

 <View key=name style= filtersView>

 <View style=cats>

 <Text style =cats_title>name</Text>

 <Text style=clearStyle>Clear All</Text>
 </View>


 <View style=justifyContent:'flex-start', alignItems:'flex-start'>

 <FlatList 
 style= marginRight:6 
 data=items
 keyExtractor=(x,i)=> i.toString()
 renderItem=(item) =>
 this.renderItems(item)
 
 />
 </View> 
 </View>

 )
 )

 

And here's the ScrollView Component:

 <ScrollView contentContainerStyle=alignItems:'flex-start', 
 justifyContent:'flex-start',flex:1, height:72 >

 this.renderComp()

 </ScrollView>

And The loop stops after one iteration.

Here's the output: https://i.stack.imgur.com/yM151.png

Any suggestions?

javascript react-native react-native-flatlist

share|improve this question

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

 renderComp()

 const filtersView,cats,cats_title, clearStyle = styles;

 const data = this.props.ingreds;

 const arr = Object.entries(data);


 return arr.map(i=> 
 const name= i[0]; 
 const items_obj = i[1];
 const items = Object.values(items_obj);

 return(

 <View key=name style= filtersView>

 <View style=cats>

 <Text style =cats_title>name</Text>

 <Text style=clearStyle>Clear All</Text>
 </View>


 <View style=justifyContent:'flex-start', alignItems:'flex-start'>

 <FlatList 
 style= marginRight:6 
 data=items
 keyExtractor=(x,i)=> i.toString()
 renderItem=(item) =>
 this.renderItems(item)
 
 />
 </View> 
 </View>

 )
 )

 

 <ScrollView contentContainerStyle=alignItems:'flex-start', 
 justifyContent:'flex-start',flex:1, height:72 >

 this.renderComp()

 </ScrollView>

share|improve this question

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

share|improve this question

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

asked Mar 25 at 7:01

Saumay PaulSaumay Paul

9611

1 Answer
1

active

oldest

votes

1

ReactNative FlatList renderItem method should return a ?React.Element component. In your case either use return this.renderItems or skip the inner brackets.

https://facebook.github.io/react-native/docs/flatlist#renderitem

(item) => this.renderItems(item)}

share|improve this answer

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!! That solved the FlatList rendering problem!!! But the renderComp() stops after one iteration. Now only one FlatList is being rendered.
  
  – Saumay Paul
  Mar 25 at 7:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is something wrong with arr.map() ??
  
  – Saumay Paul
  Mar 25 at 7:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What are you trying to do with this arr.map ? create one FlatList for each array item ?
  
  – jgoday
  Mar 25 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! Render Components containing one FlatList
  
  – Saumay Paul
  Mar 25 at 7:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If it's only one FlatList, you might want to avoid this map. Array.map will return a new array, applying a function over his items, so in your case, it will return a bunch of FlatList componentes. Return just one FlatList and pass the array to the data props. Am I wrong ?
  
  – jgoday
  Mar 25 at 7:39
  

  
  
  
  

 | 
show 4 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55332647%2funable-to-loop-and-render-flatlist-inside-map-function-react-native%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

ReactNative FlatList renderItem method should return a ?React.Element component. In your case either use return this.renderItems or skip the inner brackets.

https://facebook.github.io/react-native/docs/flatlist#renderitem

(item) => this.renderItems(item)}

share|improve this answer

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!! That solved the FlatList rendering problem!!! But the renderComp() stops after one iteration. Now only one FlatList is being rendered.
  
  – Saumay Paul
  Mar 25 at 7:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is something wrong with arr.map() ??
  
  – Saumay Paul
  Mar 25 at 7:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What are you trying to do with this arr.map ? create one FlatList for each array item ?
  
  – jgoday
  Mar 25 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! Render Components containing one FlatList
  
  – Saumay Paul
  Mar 25 at 7:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If it's only one FlatList, you might want to avoid this map. Array.map will return a new array, applying a function over his items, so in your case, it will return a bunch of FlatList componentes. Return just one FlatList and pass the array to the data props. Am I wrong ?
  
  – jgoday
  Mar 25 at 7:39
  

  
  
  
  

 | 
show 4 more comments

1

ReactNative FlatList renderItem method should return a ?React.Element component. In your case either use return this.renderItems or skip the inner brackets.

https://facebook.github.io/react-native/docs/flatlist#renderitem

(item) => this.renderItems(item)}

share|improve this answer

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!! That solved the FlatList rendering problem!!! But the renderComp() stops after one iteration. Now only one FlatList is being rendered.
  
  – Saumay Paul
  Mar 25 at 7:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is something wrong with arr.map() ??
  
  – Saumay Paul
  Mar 25 at 7:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What are you trying to do with this arr.map ? create one FlatList for each array item ?
  
  – jgoday
  Mar 25 at 7:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes! Render Components containing one FlatList
  
  – Saumay Paul
  Mar 25 at 7:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If it's only one FlatList, you might want to avoid this map. Array.map will return a new array, applying a function over his items, so in your case, it will return a bunch of FlatList componentes. Return just one FlatList and pass the array to the data props. Am I wrong ?
  
  – jgoday
  Mar 25 at 7:39
  

  
  
  
  

 | 
show 4 more comments

ReactNative FlatList renderItem method should return a ?React.Element component. In your case either use return this.renderItems or skip the inner brackets.

https://facebook.github.io/react-native/docs/flatlist#renderitem

(item) => this.renderItems(item)}

share|improve this answer

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

(item) => this.renderItems(item)}

share|improve this answer

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

answered Mar 25 at 7:12

jgodayjgoday

1,85211014

answered Mar 25 at 7:12

jgodayjgoday

1,85211014