Redux FlatList does not display the object correctly
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;
reactjs react-native redux react-redux
add a comment |
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;
reactjs react-native redux react-redux
Are you getting library value inrenderItem(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 |
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;
reactjs react-native redux react-redux
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;
reactjs react-native redux react-redux
reactjs react-native redux react-redux
asked Nov 14 '18 at 7:26
Sima Cristian AlexandruSima Cristian Alexandru
75118
75118
Are you getting library value inrenderItem(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 inrenderItem(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
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
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}
/>
); `
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%2f53295041%2fredux-flatlist-does-not-display-the-object-correctly%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
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}
/>
); `
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}
/>
); `
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}
/>
); `
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 ArslanMuhammad Arslan
13
13
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%2f53295041%2fredux-flatlist-does-not-display-the-object-correctly%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
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