CODEWITHSUNDEEP
javascriptarraysloopsfor-loopreactjs
hilarl
hilarl

Reputation: 6880

Looping through an array in ReactJs

I am trying to loop through an array and render the data inside an element. I am using ReactJs.

My data array:

var data = [{
      type: "Academic",
      time: "2015 - 2016",
      title: " MSc Software Engineering",
      place: "University of Oxford",
      description: "Lorem impsum",
      gallery: [
        {url: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/v/t1.0-1/p160x160/10923196_10204583699694173_6145976884213630323_n.jpg?oh=bd235908314ecf0ab5afa8d3f92f5abf&oe=567B51F9&__gda__=1450897067_285c7c8c720c0f130453b37e9ff9b2f8"}
      ]
    }

Array where data is supposed to be pushed to:

var events = []

Loop:

for (var i = 0; i < data.length; i++) {
      var directions;
      if (data[i] % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      events.push(
        <li>
          <TimelineEvent type={data[i].type}
            time = {data[i].time}
            title = {data[i].title}
            place = {data[i].place}
            description = {data[i].description}
            direction = {directions}/>
        </li>
      )
    }

How the rendered data needs to look like:

<li>
  <TimelineEvent
     type = "Academic"
     time = "2015 - 2016"
     title = "MSc Software Engineering",
     place = "University of Oxford",
     description = "Lorem ipsum"
     direction = "direction-r" />
</li>
<li>
  <TimelineEvent
     type = "Academic"
     time = "2015 - 2016"
     title = "MSc Software Engineering",
     place = "University of Oxford",
     description = "Lorem ipsum"
     direction = "direction-l" />
</li>

The "direction" has to be either "r" or "l" for even and odd elements.

I am getting the error:

TypeError: Cannot read property 'type' of undefined
   at Timeline.render (/Users/hilarl/Desktop/client/build/webpack:/src/components/ProfilePage/Layout/Main/Main.js:102:41)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:546:34)
   at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:566:32)
   at [object Object].wrapper [as _renderValidatedComponent] (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactPerf.js:66:21)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactCompositeComponent.js:181:32)
   at [object Object].wrapper [as mountComponent] (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactReconciler.js:37:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactMultiChild.js:207:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactDOMComponent.js:541:32)
   at ReactDOMComponent.Mixin.mountComponent (/Users/hilarl/Desktop/client/node_modules/react-dom/node_modules/react/lib/ReactDOMComponent.js:438:27)

I am not really a JS pro so I may not be doing this right. Any idea what is wrong here? Thanks a lot

Upvotes: 0

Views: 3043

Answers (3)

gcedo
gcedo

Reputation: 4931

It's already been answered, but if you want to taste some functional code:

var events = data.map(function (datum, index) {
    var directions = 'direction-'; 
    directions += index % 2 === 0 ? 'r' : 'l';
    return (
         <li>
             <TimelineEvent 
                 type={datum.type}
                 time={datum.time}
                 title={datum.title}
                 place={datum.place}
                 description={datum.description}
                 direction={directions} 
              >
                 { datum.gallery.map(function (link) {
                     return (
                         <a href="#">
                           <img 
                               className="timelineGalleryImage" 
                               src={link.url} />
                         </a>
                     );
                 } }
             <TimelineEvent />
        </li>
    );
})

Upvotes: 0

Darjan Bogdan
Darjan Bogdan

Reputation: 3910

One more thing, you should probably change is following line of code

if (data[i] % 2 == 0)

it should be if (i % 2 == 0), because data[i] will return object from the data array

Upvotes: 1

silkAdmin
silkAdmin

Reputation: 4830

Maybe try: 

for (var i = 0; i < data.length; i++) {
      var directions;
      if (data[i] % 2 == 0) {
        directions = "direction-r";
      } else {
        directions = "direction-l"
      }
      events.push(
        <li>
          <TimelineEvent type={data[i].type}
            time = {data[i].time}
            title = {data[i].title}
            place = {data[i].place}
            description = {data[i].description}
            direction = {directions}/>
        </li>
      )
    }

Also rather than or for loop you could use forEach

Upvotes: 1

Related Questions