I have a Component that looks like this:
export const RenderDetail = props => {
const createRows = props.content.reduce(function (rows, key, index) {
console.log('rows, key, index', rows, key, index);
return (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows;
}, []);
return (
<div>
{createRows.map((row, index) => {
return (
<div key={`item_${index}`}>
<Row>
{row.map((col, key) => {
return (
console.log('col ', col),
(
<div key={`item_${key}`} style={{ margin: '20px' }}>
<Col>
<dl className="jh-entity-details">
<dt>
<span id={col.id}>{col.name}</span>
</dt>
<dd>{col.value}</dd>
</dl>
</Col>
</div>
)
);
})}
</Row>
</div>
);
})}
</div>
);
};
When passing an array of objects to this component like:
const Container = [
{
id: "id",
name: "ID",
value: "10"
},
]
The desired outcome would be:
I am looking to display the data in two columns across the page. Currently, they appear too close and tightly packed together. Is there a way to format them so they fill out the whole page while still being displayed in two columns?
EDIT:
By using <Col xs="12" md="6"> as suggested.