How do I properly map array into <Text> (React native)

Question

I have an array that I need to map out in <Text>. This is what I've got in render()

categories.map(category => <Text>{category.testHeader}</Text>

But it doesn't print anything. I guess <Text> needs to be in render() right? So I tried adding it in a function to be called in render. Like this:

function myfunc() {
    return categories.map(category => <Text>{category.testHeader}</Text>)
}

Then in render():

<View>
    {myfunc()}
</View>

But then the compiler said `Cannot read property 'map' of undefined. SO tips told me to put write:

function myfunc() {
    if (this.props.data) {
        return categories.map(category => <Text>{category.testHeader}</Text>)
    }
}

But now the compiler tells me that data is undefined. Not sure what to do here... :/

is categories a global variable? did you mean this.props.categories or this.props.data.categories? — Mukesh Soni
– Mukesh Soni, Commented Apr 9, 2018 at 8:11
categories, where it come from ? should be props, local state, private variable, etc. do you mean this.props.data.categories? — I Putu Yoga Permana
– I Putu Yoga Permana, Commented Apr 9, 2018 at 8:46

erkan · Accepted Answer · 2018-06-19 10:53:59Z

7

You can use like this:

var categories = [{ id: 0, text: 'hasan' }, 
    { id: 1, text: 'erkan' },
    { id: 2, text: 'veli' }];

export default class App extends Component {
renderCategories() {
    return categories.map((item, index) => <Text key={index}>{item.text}</Text>);
}
render() {
    return (
        <View style={styles.container}>
            {this.renderCategories()}
        </View>
    );
}

}

edited Jun 19, 2018 at 10:53

answered Apr 9, 2018 at 10:42

erkan

2421 silver badge5 bronze badges

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

Comments

Developer Live · Accepted Answer · 2020-06-27 09:49:01Z

0

Firstly defined the data to be []. Then assign categories array to data and try to use it. If required use JSON.parse(data)

answered Jun 27, 2020 at 9:49

Developer Live

626 bronze badges

Collectives™ on Stack Overflow

How do I properly map array into <Text> (React native)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related