I am attempting to render out prop values from a nested object. I'm running into two issues: 1. JSX line of code (containing variables) is not rendering in the browser 2. console logging the variables, containing the .forEach() methods, return 'undefined'

Question: How can I access the nested prop values, pass them into the JSX code, and render in the browser?

Current state of my code:

//data object
project1: {
  otherData: 'value',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    }
  ]},
project2: {
  otherData: 'otherInfo',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    },
    {
      name: 'JavaScript',
      logo: 'jsTest.png',
      altText: 'JavaScript Logo'
    }
  ]}

//Component
const Technology = props => {
  const techList = props.technology; //object
  console.log(techList); //logs: [{...},{name: 'CSS',logo: 'CSSLogo.png',altText:'CSS Logo'}]
   let techItem = techList.forEach(function(arrayItem) {
      let name = arrayItem.name;
      let logo = arrayItem.logo;
      let altText = arrayItem.altText;
      console.log(name, logo, altText); //logs: CSS CSSLogo.png CSSLogo

        let techDetails = [name, logo, altText];
        console.log(techDetails); //logs values in separate console.logs: name, logo, altText

        let loopThru = techDetails.forEach(function(item) {
            console.log(item);
            return item;
        });

      console.log(techItem,loopThru); //logs 'undefined, 'undefined'
    });

    return(
        <div>
          <p>Tech Component</p> //rendered in browser
          <p>{loopThru}</p> // is NOT rendered in browser
        </div>
    );
}; 

I am attempting to render out prop values from a nested object. I'm running into two issues: 1. JSX line of code (containing variables) is not rendering in the browser 2. console logging the variables, containing the .forEach() methods, return 'undefined'

Question: How can I access the nested prop values, pass them into the JSX code, and render in the browser?

Current state of my code:

//data object
project1: {
  otherData: 'value',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    }
  ]},
project2: {
  otherData: 'otherInfo',
  technology: [ 
    {
      name: 'HTML',
      logo: 'logoTest.png',
      altText: 'HTML Logo'
    },
    {
      name: 'CSS',
      logo: 'CSSLogo.png',
      altText: 'CSS Logo'
    },
    {
      name: 'JavaScript',
      logo: 'jsTest.png',
      altText: 'JavaScript Logo'
    }
  ]}

//Component
const Technology = props => {
  const techList = props.technology; //object
  console.log(techList); //logs: [{...},{name: 'CSS',logo: 'CSSLogo.png',altText:'CSS Logo'}]
   let techItem = techList.forEach(function(arrayItem) {
      let name = arrayItem.name;
      let logo = arrayItem.logo;
      let altText = arrayItem.altText;
      console.log(name, logo, altText); //logs: CSS CSSLogo.png CSSLogo

        let techDetails = [name, logo, altText];
        console.log(techDetails); //logs values in separate console.logs: name, logo, altText

        let loopThru = techDetails.forEach(function(item) {
            console.log(item);
            return item;
        });

      console.log(techItem,loopThru); //logs 'undefined, 'undefined'
    });

    return(
        <div>
          <p>Tech Component</p> //rendered in browser
          <p>{loopThru}</p> // is NOT rendered in browser
        </div>
    );
}; 

• javascript
• reactjs

Share Follow edited Jun 28, 2018 at 20:09 Code-Apprentice 83.6k2626 gold badges158158 silver badges284284 bronze badges asked Jun 28, 2018 at 19:56 JSzeto821JSzeto821 5511 gold badge11 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your loopThru variable was never assigned anything because forEach() always returns undefined. You probably meant to use map() as that actually returns an array which you can render.

From MDN:

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable.

So instead do:

let loopThru = techDetails.map(function(item) {
  console.log(item);
  return item;
});