map 数组内部反应原生功能组件

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>
    )
}

Answer 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>
    )
}

Answer 2

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

Answer 3

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