How would I create bootstrap rows out of this? (React JS)

Question

I currently have the following array of objects, there are twelve of them:

{  
   data:[  
      {  
         type:"tweets",
         id:"1",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https://twitter.com/Javi" target="_blank">@Javi</a> this photos in accurate,
            the front went down causing the back to go up. Hahaha",
            time_ago:"13 hours ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"2",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https://twitter.com/jesse_squires" target="_blank">@jesse_squires</a> C?",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"3",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"Working on my new site :) Super exited.",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"4",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https://twitter.com/javi" target="_blank">@javi</a> Oh. Well what a troll.",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"5",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https://twitter.com/javi" target="_blank">@javi</a> was there a reason they need to stay? a specific reason?",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"6",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https://twitter.com/pearsonified" target="_blank">@pearsonified</a> ugh,
            welcome to 27,
            the new 38",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"7",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https:            //twitter.com/bobbybigwheel" target="_blank">@bobbybigwheel</a> <a href="https://twitter.com/_alastair" target="_blank">@_alastair</a> ha!",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"8",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"RT <a href="            https:            //twitter.com/dan_abramov" target="_blank">@dan_abramov</a>:            Redux being ported to Swift:            <a href="https:            //t.co/JLnIXivsG8" target="_blank" rel="nofollow">https://t.co/JLnIXivsG8</a>",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"9",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https:            //twitter.com/queerdiscox" target="_blank">@queerdiscox</a> <a href="https:            //twitter.com/stanboyet" target="_blank">@stanboyet</a> because:racism",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      },
      {  
         type:"tweets",
         id:"10",
         attributes:{  
            user_name:"AKyleAlex",
            tweet:"<a href="            https:            //twitter.com/ashfurrow" target="_blank">@ashfurrow</a> <a href="https://twitter.com/javi" target="_blank">@javi</a> I loved ate the original article so hard ….",
            time_ago:"1 day ago",
            created_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            },
            updated_at:{  
               date:"2015-12-23 06:15:19.000000",
               timezone_type:3,
               timezone:"UTC"
            }
         }
      }
   ]
}

Now for these purposes. I have already saved the data to a variable by doing:

self.setState({tweets: data.data});

Where data is the object above.

In React I am doing (ES6):

buildTweets() {

var tweets = this.state.tweets.map(function(tweet){

  return (
    <div className="col-lg-4 cl-md-4 col-sm-6 col-xs-12" key={tweet.id}>
      <strong>{tweet.attributes.user_name}</strong>
      <p><span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /></p>
      <p><em>Posted: {tweet.attributes.time_ago}</em></p>
    </div>
  );
});

return tweets;
}

This is returned and used in the render method as such:

return  (
  <div className="row">
    {this.buildTweets()}
  </div>
)

Now this, for the most part works. I get all twelve tweets back in columns. Accept it should be 3 columns of col-lg-4 col-md-4 col-sm-6 col-xs-12 not 12, like it currently is.

Any ideas how to accomplish this?

Matthew Herbst · Accepted Answer · 2015-12-23 21:43:37Z

1

[UPDATED: as pointed out, I totally forgot the rows!]

I'm assuming what you're really asking here is to have a bunch of rows, with each row having up to three columns based on the sizes you have already specified. As such:

The map() function also gets the current index as it's second parameter. However, since what you really want is an array of a different size than the original, we are going to use forEach instead of map. Using that + some math, we can accomplish what you want (I've made it full ES6 by the way :D):

buildTweets () {
  let rows = [];
  let currCols;
  this.state.tweets.forEach((tweet, i) => {
    if(i % 3 === 0) { // Start of a new row
      if(i > 0) {
        currRows.push(
          <div className='row'>
            {currCols}
          </div>
        );
      }

      currCols = [];
      rows[currRow] = [];
    }

    currCols.push(
      <div className='col-lg-4 cl-md-4 col-sm-6 col-xs-12' key={tweet.id}>
        <strong>{tweet.attributes.user_name}</strong>
        <p><span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /></p>
        <p><em>Posted: {tweet.attributes.time_ago}</em></p>
      </div>
    );
  });

  // Handle the last row
  if(currCols.length > 0) {
    currRows.push(
      <div className='row'>
        {currCols}
      </div>
    );
  }

  return rows;
},
render () {
  return  (
    <div id='tweetRowContainer'>
      {this.buildTweets()}
    </div>
  );
}

This should give you Math.ceil(tweets / 3) rows. Each row is promised to have 3 tweets, except for the last row which will have 1-3 tweets.

edited Dec 23, 2015 at 21:43

answered Dec 23, 2015 at 7:56

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

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

6 Comments

TheWebs Over a year ago

I personally hate the arrow function ;P but will for sure try this out and let you know :)

Matthew Herbst Over a year ago

Feel free to switch them out for 'normal' functions. I've started to really like them because you don't need to worry about having to call bind(this) when using arrow functions since this is lexically inherited.

TheWebs Over a year ago

ahem -> var self = this; :)

Matthew Herbst Over a year ago

@KyleAdams tomato, tomahto :)

TheWebs Over a year ago

So this didn't work: i.imgur.com/prTSpat.png You can see how they don't line up. Your render method also doesn't use row class. Which I found odd. Even with a row class it still doesn't work. Do you have a fiddle of this?

|

Collectives™ on Stack Overflow

How would I create bootstrap rows out of this? (React JS)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related