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.

Hassan Kandil · Accepted Answer · 2021-01-14 08:12:06Z

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

answered Jan 14, 2021 at 8:12

Hassan Kandil

1,8861 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested map in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related