Nested map in react native

Question

Hi everyone i am new in react native and i am try to create dropdown list with detail. Below is my code first array values is showing but experiences array value not showing kindly assist me about this issue.

    import React from "react";
import { StatusBar } from "expo-status-bar";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
const data = [
  {
    name: "Jude",
    position: "Developer",
    experiences: [
      {
        id: 0,
        job: "React UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components",
      },
      {
        id: 1,
        job: "React/ Redux UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components",
      },
    ],
  },
  {
    name: "Mikes",
    position: "Developer",
    experiences: [
      {
        id: 0,
        job: "React UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components",
      },
      {
        id: 1,
        job: "React/ Redux UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components",
      },
    ],
  },
];

function ExpandList(props) {
  return (
    <View style={styles.container}>
      {data.map(({ name, position, experiences }) => {
        return (
          <View>
            <Text>{name}</Text>
            {experiences.map((checkaa) => {
              <Text key={checkaa.id}>{checkaa.job}</Text>;
            })}
          </View>
        );
        
      })}
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  mainList: {},
  subCategoryTwo: {
    fontSize: 90,
  },
});

export default ExpandList;

when i am try to get experiences array values its showing nothing, i am stuck in this problem from one days.

Answer 1

Your second map lacks for return keyword so i modified it as following:

function ExpandList(props) {
  return (
    <View style={styles.container}>
      {data.map(({ name, position, experiences }) => {
        return (
          <View>
            <Text>{name}</Text>
            {experiences.map((checkaa) =>{
               return <Text key={checkaa.id}>{checkaa.job}</Text>
            })}
          </View>
        );
        
      })}
    </View>
  );
}