I know it seems quite easy... But I can't figure out how to get it. So, any suggestion is truly wele. Thanks.

What I have

I am using React.js. I have an array of elements (let's say 20).

What I want

I want to render 4 elements (for example) per row.

Wha the problem is

I can't figure out how to limit the amount of ponents/columns per row.

This code render all ponents in a row... How can I limit it?

populatingLayout() {
    arrayData.map(item => {
        return (
        <div className="FlexRow">
            <div className="FlexColumn">
                <Component dataProp={item} />
            </div>
        </div>
        )
    }
}

render() {
     return (
         <div className="FlexGrid">
             {this.populatingLayout()}
         </div>
    )
}

Thanks in advance!

I know it seems quite easy... But I can't figure out how to get it. So, any suggestion is truly wele. Thanks.

What I have

I am using React.js. I have an array of elements (let's say 20).

What I want

I want to render 4 elements (for example) per row.

Wha the problem is

I can't figure out how to limit the amount of ponents/columns per row.

This code render all ponents in a row... How can I limit it?

populatingLayout() {
    arrayData.map(item => {
        return (
        <div className="FlexRow">
            <div className="FlexColumn">
                <Component dataProp={item} />
            </div>
        </div>
        )
    }
}

render() {
     return (
         <div className="FlexGrid">
             {this.populatingLayout()}
         </div>
    )
}

Thanks in advance!

• javascript
• reactjs
• loops
• layout

• Have you considered only passing the first 4 values of the array into the map? – Shardj Commented Aug 21, 2017 at 12:26
• Hi @Shard. Sorry, I don't understand the point of that. What I want is to render all the elements (let's say 20, but could be 500) in rows which contain 4 ponents per row. It's a kind of grid. – Dubliner Commented Aug 21, 2017 at 12:29
• Ah my mistake @Dubliner I misread the question – Shardj Commented Aug 21, 2017 at 12:31
• No worries @Shard. I appreciate your interest on the question. – Dubliner Commented Aug 21, 2017 at 12:33
• @Dubliner checkout my answer. Run the snippet below – abdul Commented Aug 21, 2017 at 14:44

2 Answers 2

I think you're looking for something like this. Let's just say your elements are 20 div elements in a array. Then you could display each four element in a separate row like this.

class Hello extends React.Component {

constructor(props) {
     super(props);
   }
   
  
//this function will return array of element 20 divs in this case 
multipleElements() {

   let elements = [];
   for(let i = 0; i < 20; i++) {
            elements.push(
                  <div key={i}> element{i+1} </div>
           )
   }
    return elements;
}

//this function will separate each four element to display 
separateElement () { 
 var separateElements = [];
 var multiElements = this.multipleElements();

for(var i = 0; i < multiElements.length; i+=4) {
     var oneRow = [];
     oneRow.push(multiElements.slice(i, i+4).map(item => {
   return <div style={{display: 'inline-block'}}>{item}</div>
}))
separateElements.push(oneRow.map(itm => {return <div>{itm}</div>}))
}
return separateElements;
}
            
          
            
render() {
   return (<div> {this.separateElement()} </div>);
 }
};

ReactDOM.render(
 <Hello/>,
 document.getElementById('container')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.0.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your ponent. -->
</div>

You could use the style:

.row {
  float: left;
  position: relative;
  width: 100%;
}

.column {
  float: left;
  position: relative;
  width: 25%;
}

render() {
     return (
         <div className="FlexGrid">
             <div className="row">
                 arrayData.map(item => <div className="FlexColumn"><Component dataProp={item} /></div>);
             </div>
         </div>
    )
}

With this css your row will be the entire width from the father element and your column will be 1/4 width from your row.