Native Base how can I get ListItem index of List dataArray?
I'm wanting to access the index of a thats being generated from with dataArray.
For example:
<List dataArray=this.props.groceries renderRow=(groceryListItem, index) =>
<ListItem>
<Text>index</Text>
</ListItem>
>
</List>
However, this does not work. How can I access this dynamic index?
Thanks!
javascript reactjs react-native native-base
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
add a comment |
I'm wanting to access the index of a thats being generated from with dataArray.
For example:
<List dataArray=this.props.groceries renderRow=(groceryListItem, index) =>
<ListItem>
<Text>index</Text>
</ListItem>
>
</List>
However, this does not work. How can I access this dynamic index?
Thanks!
javascript reactjs react-native native-base
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
Is that possible for you to use react-nativeFlatList? index is accessible in renderItem method ofFlatList
– Saeed Zhiany
Nov 16 '18 at 7:14
add a comment |
I'm wanting to access the index of a thats being generated from with dataArray.
For example:
<List dataArray=this.props.groceries renderRow=(groceryListItem, index) =>
<ListItem>
<Text>index</Text>
</ListItem>
>
</List>
However, this does not work. How can I access this dynamic index?
Thanks!
javascript reactjs react-native native-base
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
I'm wanting to access the index of a thats being generated from with dataArray.
For example:
<List dataArray=this.props.groceries renderRow=(groceryListItem, index) =>
<ListItem>
<Text>index</Text>
</ListItem>
>
</List>
However, this does not work. How can I access this dynamic index?
Thanks!
javascript reactjs react-native native-base
javascript reactjs react-native native-base
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
asked Nov 16 '18 at 6:52
awebdevawebdev
7210
7210
Is that possible for you to use react-nativeFlatList? index is accessible in renderItem method ofFlatList
– Saeed Zhiany
Nov 16 '18 at 7:14
add a comment |
Is that possible for you to use react-nativeFlatList? index is accessible in renderItem method ofFlatList
– Saeed Zhiany
Nov 16 '18 at 7:14
Is that possible for you to use react-native
FlatList? index is accessible in renderItem method of FlatList– Saeed Zhiany
Nov 16 '18 at 7:14
Is that possible for you to use react-native
FlatList? index is accessible in renderItem method of FlatList– Saeed Zhiany
Nov 16 '18 at 7:14
add a comment |
2 Answers
2
active
oldest
votes
What is List is it ListView? İf it is you can get the index 3. prop
<ListView
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
add a comment |
React Native FlatList has similar structure to your List component and it's highly recommended by react native community to use FlatList because of efficiency, index of rendered item is accessible easily. here is an simple usage for what you want:
render()
return (
<FlatList
data=[
title: "title1",
title: "title2",
title: "title3",
title: "title4",
title: "title5",
title: "title6",
title: "title7",
title: "title8",
]
renderItem=(item) => <Text>item.index</Text>
keyExtractor=(item, index) => index.toString()/>
);
item parameter in renderItem has two important property.
- index: index of item being rendered
- data: the data you provided to flat list, in this sample is one of objects of array passed to
dataprops of flatList, e.g.title: "title1"that I don't use this data inrenderItemmethod. you can do what you want with it in your way like this:data=this.props.groceries
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
add a comment |
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%2f53332814%2fnative-base-how-can-i-get-listitem-index-of-list-dataarray%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
What is List is it ListView? İf it is you can get the index 3. prop
<ListView
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
add a comment |
What is List is it ListView? İf it is you can get the index 3. prop
<ListView
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
add a comment |
What is List is it ListView? İf it is you can get the index 3. prop
<ListView
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
What is List is it ListView? İf it is you can get the index 3. prop
<ListView
renderRow={(rowData, sectionID, index) => // you can get the index from 3.
...
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
answered Nov 16 '18 at 8:11
Yasin UgurluYasin Ugurlu
25429
25429
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
add a comment |
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Thanks! This worked. List is a Native Base component.
– awebdev
Nov 17 '18 at 20:15
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
Okey I got it. I am happy to help my answers for you
– Yasin Ugurlu
Nov 17 '18 at 21:44
add a comment |
React Native FlatList has similar structure to your List component and it's highly recommended by react native community to use FlatList because of efficiency, index of rendered item is accessible easily. here is an simple usage for what you want:
render()
return (
<FlatList
data=[
title: "title1",
title: "title2",
title: "title3",
title: "title4",
title: "title5",
title: "title6",
title: "title7",
title: "title8",
]
renderItem=(item) => <Text>item.index</Text>
keyExtractor=(item, index) => index.toString()/>
);
item parameter in renderItem has two important property.
- index: index of item being rendered
- data: the data you provided to flat list, in this sample is one of objects of array passed to
dataprops of flatList, e.g.title: "title1"that I don't use this data inrenderItemmethod. you can do what you want with it in your way like this:data=this.props.groceries
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
add a comment |
React Native FlatList has similar structure to your List component and it's highly recommended by react native community to use FlatList because of efficiency, index of rendered item is accessible easily. here is an simple usage for what you want:
render()
return (
<FlatList
data=[
title: "title1",
title: "title2",
title: "title3",
title: "title4",
title: "title5",
title: "title6",
title: "title7",
title: "title8",
]
renderItem=(item) => <Text>item.index</Text>
keyExtractor=(item, index) => index.toString()/>
);
item parameter in renderItem has two important property.
- index: index of item being rendered
- data: the data you provided to flat list, in this sample is one of objects of array passed to
dataprops of flatList, e.g.title: "title1"that I don't use this data inrenderItemmethod. you can do what you want with it in your way like this:data=this.props.groceries
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
add a comment |
React Native FlatList has similar structure to your List component and it's highly recommended by react native community to use FlatList because of efficiency, index of rendered item is accessible easily. here is an simple usage for what you want:
render()
return (
<FlatList
data=[
title: "title1",
title: "title2",
title: "title3",
title: "title4",
title: "title5",
title: "title6",
title: "title7",
title: "title8",
]
renderItem=(item) => <Text>item.index</Text>
keyExtractor=(item, index) => index.toString()/>
);
item parameter in renderItem has two important property.
- index: index of item being rendered
- data: the data you provided to flat list, in this sample is one of objects of array passed to
dataprops of flatList, e.g.title: "title1"that I don't use this data inrenderItemmethod. you can do what you want with it in your way like this:data=this.props.groceries
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
React Native FlatList has similar structure to your List component and it's highly recommended by react native community to use FlatList because of efficiency, index of rendered item is accessible easily. here is an simple usage for what you want:
render()
return (
<FlatList
data=[
title: "title1",
title: "title2",
title: "title3",
title: "title4",
title: "title5",
title: "title6",
title: "title7",
title: "title8",
]
renderItem=(item) => <Text>item.index</Text>
keyExtractor=(item, index) => index.toString()/>
);
item parameter in renderItem has two important property.
- index: index of item being rendered
- data: the data you provided to flat list, in this sample is one of objects of array passed to
dataprops of flatList, e.g.title: "title1"that I don't use this data inrenderItemmethod. you can do what you want with it in your way like this:data=this.props.groceries
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
edited Nov 16 '18 at 7:57
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
answered Nov 16 '18 at 7:43
Saeed ZhianySaeed Zhiany
1,59641825
1,59641825
add a comment |
add a comment |
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%2f53332814%2fnative-base-how-can-i-get-listitem-index-of-list-dataarray%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
Is that possible for you to use react-native
FlatList? index is accessible in renderItem method ofFlatList– Saeed Zhiany
Nov 16 '18 at 7:14