title: React - result of forEach() is undefined
body: <p>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'</p>
  
  <p>Question: How can I access the nested prop values, pass them into the JSX code, and render in the browser?</p>
  
  <p>Current state of my code:</p>
  
  <pre><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 =&gt; {
    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(
          &lt;div&gt;
            &lt;p&gt;Tech Component&lt;/p&gt; //rendered in browser
            &lt;p&gt;{loopThru}&lt;/p&gt; // is NOT rendered in browser
          &lt;/div&gt;
      );
  }; 
  </code></pre>