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

CodePudding user response：

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

CodePudding user response：

This what you are missing "DataList?.map(e => {"

you need to add the question mark, it will check if the data is

loaded or not. React loads your state with your initial state

first, If you use [] or {} for your initial state you have to

remember that that's what your first value will be. Hence the check

You can also use "DataList.length && DataList.map(e => {" Also.

This will basically do the same thing for you, pick the one you like best.

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

CodePudding user response：

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