CODEWITHSUNDEEP
javascriptreact-native
Fahad Hassan
Fahad Hassan

Reputation: 39

Nested map in react native

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.

Upvotes: 0

Views: 234

Answers (1)

Hassan Kandil
Hassan Kandil

Reputation: 1866

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

Upvotes: 1

Related Questions