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 !

But how can I return properly, I don't know how can I do that, because I have the map and I'm returning everything there — Alma Fernanda
– Alma Fernanda, Commented Sep 20, 2019 at 0:34
It didn't work , I don't know why I added the return before the map, but it is not working ;( — Alma Fernanda
– Alma Fernanda, Commented Sep 20, 2019 at 0:49
"It's not working" needs further elaboration. Also, update code in the question so that it reflected what exactly you have at the moment. — zerkms
– zerkms, Commented Sep 20, 2019 at 0:50

lukeskywaka · Accepted Answer · 2019-09-20 01:02:37Z

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>

    }
}

Andy Refuerzo · Accepted Answer · 2019-09-20 01:06:06Z

0

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

answered Sep 20, 2019 at 1:06

Andy Refuerzo

3,3321 gold badge35 silver badges39 bronze badges

Collectives™ on Stack Overflow

Array.map is not rendering in 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