Array.map is not rendering in react native

Question

I have some issues with my code, I don't know what is wrong,

look this is my code :

import React, { Component } from 'react';
import {ActivityIndicator,Alert,View, Text,ScrollView,Image,AsyncStorage, ImageBackground,TouchableOpacity } from 'react-native';
import {  Button } from 'native-base';
import styles from './styles/style';

export default class MisCompromisos extends Component {


  constructor(props){

        super(props);
        this.state = {
            usuario : "",
            id_usuario: "",
            isLoading: true,
            dataSource : []
        }
        this.CargarApp();

    }

    CargarApp = async() => {

        const userToken = await AsyncStorage.getItem('usuario');

        let datos_usuario = JSON.parse(userToken);  

        this.setState({ usuario     : datos_usuario, 
                        id_usuario  : datos_usuario.user_id 
                    });

        this.misArticulos();

    }


    misArticulos(){

        this.setState({
            isLoading: true
        });

        return fetch('http://endpoint.com', {
            method: 'POST',
            header :{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id_usuario      : this.state.id_usuario,

            })
        })
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
              isLoading: false,
              dataSource: responseJson,
            }, function(){

            });
        })
        .catch((error) => {
            Alert.alert('error: '+error);
            console.error(error);
        });

    }

    misCompromisosG20(){
        const MisDatos = this.state.dataSource;
        let i = 1;
        let clase = "";
        if(this.state.dataSource && this.state.dataSource.length){

            return (this.state.dataSource.map((value) => {
                     <View key={value.id_comentario.toString()} value={value.id_comentario} style={styles.ContenedorTarjetas}>
                        <View style={styles.CardCompromisosFirst}>
                            <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Compromiso: </Text></View>
                            <View><Text style={styles.CompromisosBlancos}>{value.compromisos_personales}</Text></View>
                        </View>      
                  </View>;
            })
            );
        }
        else{
            return  <View  style={styles.ContenedorTarjetas}>
                        <View style={styles.CardCompromisosFirst}>
                            <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Lo sentimos: </Text></View>
                            <View><Text style={styles.CompromisosBlancos}>Aún no guardas ningún compromiso</Text></View>
                        </View>
                    </View>

        }
    }

  render() {

    const userToken = this.state.usuario;
    const MisDatos = this.state.dataSource;
    let i = 1;
    let clase = "";

    if(this.state.isLoading){
        return(
          <View style={styles.MainContainer}>
            <ActivityIndicator/>
          </View>
        )
    }

    else{
        return (
            <ScrollView>
                <ImageBackground 
                    source={require('../assets/img/woods-g20.jpg')}
                    imageStyle={{resizeMode: 'cover'}}
                    style={{
                        width: '100%', flex: 1, alignItems: 'center', justifyContent: 'center'
                    }}
                >
                    <View style={styles.ContenedorMain}>
                        <View style={styles.ContenedorCompromisos}>
                            <Image
                            style={{width: 236, height: 85}}
                            source={require('./../assets/img/logo.png')}
                            />
                            <Text style={styles.TituloCompromisos}>My commitments </Text>
                            <Text style={styles.ParrafosBlancos}>{userToken.name}</Text>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('Bienvenido')} style={styles.Casita}>
                                <Image
                                    style={{width: 40, height: 37}}
                                    source={require('./../assets/img/white-house.png')}
                                />
                            </TouchableOpacity>
                            <View style={styles.CardReload}>
                                <Button block primary style={{ marginTop: 10, marginBottom: 20, width: '100%' }} onPress={this.misArticulos.bind(this)} >
                                    <Text style={styles.Blanco}>Cargar más información</Text>
                                </Button>                            
                            </View>
                        </View>
                    </View>

                </ImageBackground>
                <View style={styles.ContenedorMain}>
                    {
                        this.misCompromisosG20()
                    }

                </View>
            </ScrollView>
        );
    }


  }
}

When I put the array.map with no validation is working but when I try the if and else it is not working, I added the return before the map, but it is not working so, what's wrong with my code, can somebody help me with that, I'm also new in react native,

Thank you !

Answer 1

array.Map should be inside return:

return(
    MisDatos.map((value) => {    
        <View key={value.id_comentario.toString()} value={value.id_comentario} style={styles.ContenedorTarjetas}>
            <View style={CardCompromisosFirst}>
                <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Commitments: </Text></View>
                <View><Text style={styles.CompromisosBlancos}>{value.compromisos_personales}</Text></View>
            </View>      
        </View>
    })
)

Answer 2

You missed return in the map function

misCompromisosG20(){
    const MisDatos = this.state.dataSource;
    let i = 1;
    let clase = "";
    if(this.state.dataSource && this.state.dataSource.length){

        return (this.state.dataSource.map((value) => {
                 return (<View key={value.id_comentario.toString()} value={value.id_comentario} style={styles.ContenedorTarjetas}>
                    <View style={styles.CardCompromisosFirst}>
                        <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Compromiso: </Text></View>
                        <View><Text style={styles.CompromisosBlancos}>{value.compromisos_personales}</Text></View>
                    </View>      
              </View>);
        })
        );
    }
    else{
        return  <View  style={styles.ContenedorTarjetas}>
                    <View style={styles.CardCompromisosFirst}>
                        <View style={styles.CompromisosBorder}><Text style={styles.CompromisosBlancos}>Lo sentimos: </Text></View>
                        <View><Text style={styles.CompromisosBlancos}>Aún no guardas ningún compromiso</Text></View>
                    </View>
                </View>

    }
}