Unable to loop and render FlatList inside .map function react-nativeJavaScript 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
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;
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
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
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
asked Mar 25 at 7:01
Saumay PaulSaumay Paul
9611
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
javascript react-native react-native-flatlist
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
asked Mar 25 at 7:01
Saumay PaulSaumay Paul
9611
asked Mar 25 at 7:01
Saumay PaulSaumay Paul
9611
9611
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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)}
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
);
);
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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)}
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)}
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)}
answered Mar 25 at 7:12
jgodayjgoday
1,85211014
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)}
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
answered Mar 25 at 7:12
jgodayjgoday
1,85211014
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
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
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
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
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
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
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
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
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
