Redux FlatList does not display the object correctly












0















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;









share|improve this question























  • 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
















0















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;









share|improve this question























  • 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














0












0








0








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;









share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 14 '18 at 7:26









Sima Cristian AlexandruSima Cristian Alexandru

75118




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



















  • 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





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












1 Answer
1






active

oldest

votes


















0














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}
/>
); `





share|improve this answer























    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















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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}
    />
    ); `





    share|improve this answer




























      0














      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}
      />
      ); `





      share|improve this answer


























        0












        0








        0







        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}
        />
        ); `





        share|improve this answer













        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}
        />
        ); `






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 14 '18 at 8:30









        Muhammad ArslanMuhammad Arslan

        13




        13






























            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














            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





















































            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







            Popular posts from this blog

            Bressuire

            Vorschmack

            Quarantine