issue with the code, not able to use map array for print the view

Issue

This is my code.

class Squence extends Component {
    constructor(props){
        super(props)
        this.data = []
    }
    render() { 
        for(var i = 0; i < 3; i++){
            this.data.push(i);
        }
        return ( 
                <View>
                {this.data.map((item) => {
                    <View key={item} style={{height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}}><Text>{item}</Text></View>
                })}
                </View>
         );
    }
}
export default Squence;

I think my code is not wrong, but it doesn't work! What's the reason? I used the map method with the wrong?

Solution

You're not returning anything from map. Use () instead of {} or type return explicitly. Here are some examples:

this.data.map(item => <View>...</View>);

this.data.map(item => (
    <View>...</View>
));

this.data.map(item => {
    return <View>...</View>;
});

Answered By - wdm