ReactJS - nested loops with map js

Question

I'm trying to have a nested map but i'm getting an undefined error.

So i'm passing the profile props to Link router in navbar.jsx, profile: this.state.profile. Then I fetching the data in profilePage.jsx, where I want to pass the data in an element.

Profile json has 3 components -> experience, education, and skills. So i need to have a nested loop for the data to show up in the element. For example; calling `{experience.company} so the company name will show up.

When i called the profile page, in the console i see profile.experience getting called but then it goes undefined:

(3) [{...}, {...}, {...}] "passing"

undefined "passing"

I tried different ways, splitting the json components but still getting the same error. I know it's mapping issue but I'm not sure if I'm missing something, maybe in React; new to React so learning as much as I can through errors. Your help will be appreciated!

Eventually I want the profile page to look like this:

Education
  Company A
  August 2016 - present
  salesman

  Company B
  Feb 2016 - August 2016
  developer

  Company C
  August 2012 - October 2015
  clerk

Education
  school A
  fall 2015
  mathematics

  school B
  may 2008
  business

Skills
  tools: html, css, js, sql

profilePage.jsx

import React, { Component } from "react";
import ProfileItem from "./profileItem"

class Profile extends Component {

    render(){

        // let profile = this.props.location.profile.map((experience) => <li>{experience.experience}</li>);
        // console.log(profile);


        const experience = this.props.location.profile.map((profile,idx) => {
            console.log(profile.experience, 'passing');
            return profile.experience.map((experience,idx) => 
                <div>
                    <p key={idx}>{experience.company}</p>
                </div>
            );
        });

    }
}

export default Profile;

navbar.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navbar extends Component {


    constructor(props){
        super(props);
        this.state = {
            profile: [
                {'experience': [
                    {
                        'company': 'company A',
                        'date': 'August 2016 - Present',
                        'jobTitle': 'salesman'
                    },
                    {
                        'company': 'company B',
                        'date': 'February 2016 - August 2016',
                        'jobTitle': 'Developer'
                    },
                    {
                        'company': 'company C',
                        'date': 'August 2012 - October 2015',
                        'jobTitle': 'clerk'
                    }
                ]},
                {'education': [
                    {
                        'school': 'shcool A',
                        'date': 'Fall 2015',
                        'degree': 'mathematics'
                    },
                    {
                        'school': 'school B',
                        'date': 'May 2008',
                        'degree': 'business'
                    }
                ]},
                {'skills': [
                    {
                        'Tools': 'HTML, CSS, Javascript, SQL, Python'
                    }
                ]}
            ],
            experience: [],
            education: [],
            skills: []
        };
    }

    render(){
        return (

            <div className="navFrame">
                <Link to="/">
                    <div className="topNav"><div className="navBar"><h3>name</h3></div></div>
                </Link>

                <Link to="/projects">
                    <div className="rightNav"><div className="navBar"><h3>Projects</h3></div></div>
                </Link>

                <Link to="/contact">
                    <div className="bottomNav"><div className="navBar"><h3>Contact</h3></div></div>
                </Link>

                <Link to={{pathname: '/profile', profile: this.state.profile}}>
                    <div className="leftNav"><div className="navBar"><h3>Profile</h3></div></div>
                </Link>
            </div>

        );
    }
}

export default Navbar;

Answer 1

Try to run this on browser's console => From your given Json:

 var response = {profile: [
    {'experience': [
        {
          'company': 'company A',
          'date': 'August 2016 - Present',
          'jobTitle': 'salesman'
        },
        {
          'company': 'company B',
          'date': 'February 2016 - August 2016',
          'jobTitle': 'Developer'
        },
        {
          'company': 'company C',
          'date': 'August 2012 - October 2015',
          'jobTitle': 'clerk'
        }
      ]},
    {'education': [
        {
          'school': 'shcool A',
          'date': 'Fall 2015',
          'degree': 'mathematics'
        },
        {
          'school': 'school B',
          'date': 'May 2008',
          'degree': 'business'
        }
      ]},
    {'skills': [
        {
          'Tools': 'HTML, CSS, Javascript, SQL, Python'
        }
      ]}
  ],
    experience: [],
  education: [],
  skills: []
}

when we try to run response.profile.map() it will iterate over all the elements present in this array

response.profile.map(ele => console.log(ele)) will give 3 elements i.e. experience, education and skills

now within an inner block of your code when you will iterate over this element for the first time you will get experience key as defined but for next two iterations it will fail since the key is not present. you can add a filter in between the way I've done below !

const experience = this.props.location.profile
      .filter(profile => profile.hasOwnProperty("experience"))
      .map((profile, idx) => {
        return profile.experience.map((experience, idx) => (
          <div>
            <p key={idx}>{experience.company}</p>
          </div>
        ));
      });

Hope this might help !