map an array inside react native functional component

Question

I'm trying to print My letters array on the screen and nothing is currently showing.

I've also tried to wrap the touchableOpacity view another View also or change it to View or Text only but I didn't succeeded yet.

const letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

const OptionalLetters = props => {

    const mixedLetters = () => {

        letters.map(()=> (letter, key) => {
            return (
                <TouchableOpacity key={Math.random()} onPress={()=> console.log('letter pressed')}>
                    <Text>{letter}</Text>
                </TouchableOpacity>
            )
        })
    }

    return (
        <View style={styles.screen}>
            {mixedLetters()}
        </View>
    )
}

Text is a component ?. Please show the html of Text

brk
– brk

2020-05-05 17:38:38 +00:00
Commented May 5, 2020 at 17:38 — brk
– brk, Commented May 5, 2020 at 17:38

bmovement · Accepted Answer · 2020-05-05 17:42:26Z

1

You're not returning the map. Do this:

const letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

const OptionalLetters = props => {

    const mixedLetters = () => {

        return letters.map((letter, key) => {
            return (
                <TouchableOpacity key={Math.random()} onPress={()=> console.log('letter pressed')}>
                    <Text>{letter}</Text>
                </TouchableOpacity>
            )
        })
    }

    return (
        <View style={styles.screen}>
            {mixedLetters()}
        </View>
    )
}

answered May 5, 2020 at 17:42

bmovement

8677 silver badges12 bronze badges

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

Comments

Mark Partola · Accepted Answer · 2020-05-05 17:43:13Z

0

It looks like you forgot a return statement here letters.map

answered May 5, 2020 at 17:43

Mark Partola

6643 silver badges10 bronze badges

Comments

Shmili Breuer · Accepted Answer · 2020-05-05 17:43:30Z

0

You have an extra () => in your code.

Change

letters.map(()=> (letter, key) => {

To

letters.map((letter, key) => {

You can also use the key (which holds the index so it's always unique) as the key

edited May 5, 2020 at 17:43

answered May 5, 2020 at 17:42

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

1 Comment

bmovement Over a year ago

Haha yeah, that too!

Collectives™ on Stack Overflow

map an array inside react native functional component

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related