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;

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

Sign up or log in

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

Post as a guest

Name

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

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

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

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

搜尋此網誌

Vfrdtyky