Redux FlatList does not display the object correctly

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

i'm using redux with react native and i have a flatlist to display but it does not display the title or description of the object. It displays on screen all the rows of the object but when i call the title for example it does not display it. Here is my code:

import React, Component from 'react';
import FlatList,Text from 'react-native';
import connect from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component 

renderItem(library) 
 return <ListItem library=library />;



 render() 
 return (
 <FlatList
 data=this.props.libraries
 renderItem=this.renderItem
 keyExtractor=library => library.id.toString()
 />

 );
 



const mapStateToProps = state => 
 return libraries: state.libraries 
;

export default connect(mapStateToProps)(LibraryList);

ListItem.js

import React, Component from 'react';
import Text from 'react-native';
import CardSection from './common';

class ListItem extends Component
 render() 
 return(
 <CardSection>
 <Text>
 this.props.library.title
 </Text>
 </CardSection>
 );
 


export default ListItem;

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

Are you getting library value in renderItem(library) ?

– Madhavan.V
Nov 14 '18 at 7:34

I'm not sure what you want to say, could you be more explicit?

– Sima Cristian Alexandru
Nov 14 '18 at 9:36

add a comment |

import React, Component from 'react';
import FlatList,Text from 'react-native';
import connect from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component 

renderItem(library) 
 return <ListItem library=library />;



 render() 
 return (
 <FlatList
 data=this.props.libraries
 renderItem=this.renderItem
 keyExtractor=library => library.id.toString()
 />

 );
 



const mapStateToProps = state => 
 return libraries: state.libraries 
;

export default connect(mapStateToProps)(LibraryList);

ListItem.js

import React, Component from 'react';
import Text from 'react-native';
import CardSection from './common';

class ListItem extends Component
 render() 
 return(
 <CardSection>
 <Text>
 this.props.library.title
 </Text>
 </CardSection>
 );
 


export default ListItem;

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

Are you getting library value in renderItem(library) ?

– Madhavan.V
Nov 14 '18 at 7:34

I'm not sure what you want to say, could you be more explicit?

– Sima Cristian Alexandru
Nov 14 '18 at 9:36

add a comment |

import React, Component from 'react';
import FlatList,Text from 'react-native';
import connect from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component 

renderItem(library) 
 return <ListItem library=library />;



 render() 
 return (
 <FlatList
 data=this.props.libraries
 renderItem=this.renderItem
 keyExtractor=library => library.id.toString()
 />

 );
 



const mapStateToProps = state => 
 return libraries: state.libraries 
;

export default connect(mapStateToProps)(LibraryList);

ListItem.js

import React, Component from 'react';
import Text from 'react-native';
import CardSection from './common';

class ListItem extends Component
 render() 
 return(
 <CardSection>
 <Text>
 this.props.library.title
 </Text>
 </CardSection>
 );
 


export default ListItem;

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

import React, Component from 'react';
import FlatList,Text from 'react-native';
import connect from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component 

renderItem(library) 
 return <ListItem library=library />;



 render() 
 return (
 <FlatList
 data=this.props.libraries
 renderItem=this.renderItem
 keyExtractor=library => library.id.toString()
 />

 );
 



const mapStateToProps = state => 
 return libraries: state.libraries 
;

export default connect(mapStateToProps)(LibraryList);

ListItem.js

import React, Component from 'react';
import Text from 'react-native';
import CardSection from './common';

class ListItem extends Component
 render() 
 return(
 <CardSection>
 <Text>
 this.props.library.title
 </Text>
 </CardSection>
 );
 


export default ListItem;

reactjs react-native redux react-redux

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

asked Nov 14 '18 at 7:26

Sima Cristian Alexandru

75118

Are you getting library value in renderItem(library) ?

– Madhavan.V
Nov 14 '18 at 7:34

I'm not sure what you want to say, could you be more explicit?

– Sima Cristian Alexandru
Nov 14 '18 at 9:36

add a comment |

Are you getting library value in renderItem(library) ?

– Madhavan.V
Nov 14 '18 at 7:34

I'm not sure what you want to say, could you be more explicit?

– Sima Cristian Alexandru
Nov 14 '18 at 9:36

Are you getting library value in renderItem(library) ?

– Madhavan.V
Nov 14 '18 at 7:34

I'm not sure what you want to say, could you be more explicit?

– Sima Cristian Alexandru
Nov 14 '18 at 9:36

add a comment |

1 Answer
1

active

oldest

votes

try to modify your renderItem function by just putting curly braces in the arguments and specify library object within that here is the example

_renderItem = (item) => (
 <MyListItem
 id=item.id
 onPressItem=this._onPressItem
 selected=!!this.state.selected.get(item.id)
 title=item.title
 />
 ); `

answered Nov 14 '18 at 8:30

Muhammad Arslan

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
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295041%2fredux-flatlist-does-not-display-the-object-correctly%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

try to modify your renderItem function by just putting curly braces in the arguments and specify library object within that here is the example

_renderItem = (item) => (
 <MyListItem
 id=item.id
 onPressItem=this._onPressItem
 selected=!!this.state.selected.get(item.id)
 title=item.title
 />
 ); `

answered Nov 14 '18 at 8:30

Muhammad Arslan

add a comment |

try to modify your renderItem function by just putting curly braces in the arguments and specify library object within that here is the example

_renderItem = (item) => (
 <MyListItem
 id=item.id
 onPressItem=this._onPressItem
 selected=!!this.state.selected.get(item.id)
 title=item.title
 />
 ); `

answered Nov 14 '18 at 8:30

Muhammad Arslan

add a comment |

try to modify your renderItem function by just putting curly braces in the arguments and specify library object within that here is the example

_renderItem = (item) => (
 <MyListItem
 id=item.id
 onPressItem=this._onPressItem
 selected=!!this.state.selected.get(item.id)
 title=item.title
 />
 ); `

answered Nov 14 '18 at 8:30

Muhammad Arslan

try to modify your renderItem function by just putting curly braces in the arguments and specify library object within that here is the example

_renderItem = (item) => (
 <MyListItem
 id=item.id
 onPressItem=this._onPressItem
 selected=!!this.state.selected.get(item.id)
 title=item.title
 />
 ); `

answered Nov 14 '18 at 8:30

Muhammad Arslan

answered Nov 14 '18 at 8:30

Muhammad Arslan

answered Nov 14 '18 at 8:30

Muhammad Arslan

answered Nov 14 '18 at 8:30

Muhammad Arslan

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt