Menu
I'd simply like to do something as follows:
<div class="container">
<div class="row">
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
</div>
<div class="row">
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
<div class="col-md-4">content</div>
</div>
<!-- etc ... -->
</div>
Eg, every 3 .col-md-4's is wrapped in a .row
I've tried:
rows.push(<div className="row">);
for (var count = 0; count < 9; count++) {
rows.push( <!-- content --> );
// Add closing and reopening divs every 3 elements
if (count % 3 === 0) {
rows.push(</div><div className="row">);
}
}
rows.push(</div>);
}
This unfortunately doesn't work.
Furthermore 3 and 9 are just examples here, and I was wondering if there was a generic approach.
520
React class based components are the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).
When creating a React component, the component's name must start with an upper case letter. The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
Rendering Elements. Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen: const element = <h1>Hello, world</h1>; Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Note:
React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().
You should not concatenate elements like a string, but create and compose react elements. You can generate an array of your elements with content first, then reduce it to groups and wrap with your container:
render() {
var content = [
"content 1", "content 2", "content 3", "content 4", "content 5",
"content 6", "content 7", "content 8", "content 9", "content 10"
];
var groupSize = 3;
var rows = content.map(function(content) {
// map content to html elements
return <div className="col-md-4">{content}</div>;
}).reduce(function(r, element, index) {
// create element groups with size 3, result looks like:
// [[elem1, elem2, elem3], [elem4, elem5, elem6], ...]
index % groupSize === 0 && r.push([]);
r[r.length - 1].push(element);
return r;
}, []).map(function(rowContent) {
// surround every group with 'row'
return <div className="row">{rowContent}</div>;
});
return <div className="container">{rows}</div>;
}
If you're already using lodash, you might be interested in the chunk function:
render: function() {
var rows = [<div className="col-md-4">content</div>, ...]
return _.chunk(rows, 3).map(function(group) {
return <div className="row">{group}</div>
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
