Q:

Item inside an object returns as undefined

I passed an object to my component as a prop. I can access it and it returns it as an object but when I try to access an item out of the object which I'm sure it exist it says undefined.
When I run this:
import React, { Component } from 'react';
import { Text } from 'react-native';
import { CardSection } from './common';

class ListItem extends Component {
    render() {
        const { titleStyle } = styles;
        console.log(this.props.library);
        console.log(this.props.library.title);

        return (
            <CardSection>
                <Text style={titleStyle}>{this.props.library.title}</Text>
            </CardSection>
        );
    }
}

I get this:
{…}
​
    index: 0
​
    item: Object { id: 0, title: "Webpack", description: "Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand." }

undefined

This result for the last console.log() is in the bottom.
This is the component from where I am passing the library object:
import React, { Component } from 'react';
import { FlatList } 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) => ({ libraries: state.libraries });

export default connect(mapStateToProps)(LibraryList);

Check the full code here: https://github.com/ceerees12/tech_stack

A:

Try changing renderItem={this.renderItem} into renderItem={() =>this.renderItem(library)}

