React native react sub array in object

Question

I am tired print out sub array data form an object in render()..

data object JSON:

{
"genres": [
    {
        "id": 27,
        "name": "aa"
    },
    {
        "id": 878,
        "name": "bb"
    },
    {
        "id": 28,
        "name": "cc"
    },
    {
        "id": 53,
        "name": "dd"
    }
], 
"status": "Released",
"tagline": ""
}

MyMainScreen.js

render() {
    return (
        <Container>
            <Content style={{marginLeft:0,marginRight:0}}>
                <InfoSection key={this.state.data.id} info={this.state.data}/>
            </Content>
        </Container>
    );}

InfoSection .js

const InfoSectionCard = ({ info }) => (
<View>
    <Text style={styles.cardGenreItem}>{info.genres}</Text>
</View>
);
export default InfoSectionCard;

I was using .map to solve this.. not it does work usually. It works print out all JSON object when usingJSON.stringify(obj)

When I try

<Text style={styles.cardGenreItem}>{info.genres}</Text>

the react error message are Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.

But then add the '.map'

info.genres.map(item =><Text style={styles.cardGenreItem}>{item.name}</Text>)

the react error message are TypeError: undefined is not an object(evaluating 'info.genres.map')

Matt · Accepted Answer · 2018-10-06 08:16:17Z

1

Your question isn't very clear but am I right in thinking that the data shown in the json is parsed and stored in your component state? If you want InfoSection.js (should be .jsx) to display one Text component per element then you would want to do:

const InfoSectionCard = ({ info }) => (
    <View>
        {info.genres.map(genre => <Text style={styles.cardGenreItem} key={genre.id}>{genre.name}</Text>}
    </View>
);

export default InfoSectionCard;

answered Oct 6, 2018 at 8:16

Matt

3241 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React native react sub array in object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related