Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Map function doesn't work in when rendering dummy data in React Native

map function doesn't work, when rendering data at React Native

const DataList = [
    {
      id: '1',
      title: 'B',
      name: 'Rulisa Andara',
      phone: '+ 62 112 3456 2311',
    },
    {
      id: '2',
      title: 'C',
      name: 'Tamara Amaris',
      phone: '+ 62 112 0984 2456',
    },

    {
      id: '3',
      title: 'D',
      name: 'Tania Sultan',
      phone: '+ 62 234 4534 3464',
    },

    {
      id: '4',
      title: 'E',
      name: 'Maria Tamani',
      phone: '+ 62 999 1123 2345',
    },
  ];
  const list = () => {
    return DataList.map(e => {
      return (
        <View style={styles.container} key={e.id}>
          <InputSearching />
          <View style={{margin: 20}}>
            <View>
              <Text>{e.title}</Text>
            </View>
            <View style={styles.wrapperList}>
              <View style={styles.wrapperImageList}>
                <Image style={styles.imageList} source={iconUser} />
              </View>
              <View>
                <Text>{e.name}</Text>
                <Text>{e.phone}</Text>
              </View>
              <View style={styles.wrapperOptionsList}>
                <Text style={styles.optionsList}>...</Text>
              </View>
            </View>
          </View>
        </View>
      );
    });
  };
  return <View>{list()}</View>;
};
like image 294
Reza Alpadizami Avatar asked Mar 19 '26 19:03

Reza Alpadizami


1 Answers

you dont need returns

  const list = () => {
     DataList.map(e => {     
        <View style={styles.container} key={e.id}>
          <InputSearching />
          <View style={{margin: 20}}>
            <View>
              <Text>{e.title}</Text>
            </View>
            <View style={styles.wrapperList}>
              <View style={styles.wrapperImageList}>
                <Image style={styles.imageList} source={iconUser} />
              </View>
              <View>
                <Text>{e.name}</Text>
                <Text>{e.phone}</Text>
              </View>
              <View style={styles.wrapperOptionsList}>
                <Text style={styles.optionsList}>...</Text>
              </View>
            </View>
          </View>
        </View>    
    });
  };
  return <View>{list()}</View>;
};
like image 185
hsngdr Avatar answered Mar 21 '26 08:03

hsngdr



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!