Render element grouped by property object reactjs - reactjs

Question

I have json Array Like this:
{
area:1,
label: "element1"
},
{
area:3,
label: "element3"
},
{
area:1,
label: "element2"
},
{
area:2,
label: "element2_1"
}
I would render an element like:
Area 1 -
element1
element2
Area 2-
element2_1
Area 3 -
element3
I have done this for now, but now I don't know how to group for property "area"
this.state.areas.map(function(el, key){
return (
<div>
<span><strong>{el.label}</strong></span>
</div>
);
)}

Answer 1

If you make your labels into an Array, you can group and render them like this.
var Hello = React.createClass({
componentWillMount: function() {
this.state = {
area: [
{
area: 1,
label: ['element 1', 'element 2']
},
{
area: 2,
label: ['element 2_1']
},
{
area: 3,
label: ['element 3']
}
]
};
},
render: function() {
return (
<div>
{ this.state.area.map(function(el, key) {
return (
<div key={el.area}>
<span>
<strong>
{ el.label.map(function(label) {
return (
<span key={label}>{label}</span>
)
}) }
</strong>
</span>
</div>
);
}) }
</div>
)
}
});
ReactDOM.render(
<Hello /> ,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Answer 2

I guess this can help you https://jsfiddle.net/69z2wepo/69759/
const myState = [{
area:1,
label: "element1"
},
{
area:3,
label: "element3"
},
{
area:1,
label: "element2"
},
{
area:2,
label: "element2_1"
}];
const ShowArea = (props) => <div><strong>Area {props.area}</strong><span>{props.children}</span></div>
const ShowLabel = (props) =>{
return(<span style={{paddingLeft:'10px'}} key={props.label}><strong>{props.label}</strong></span>)
};
var Hello = React.createClass({
render: function() {
const CompareByArea = (a,b) => a.area > b.area;
const OrderList = myState.sort(CompareByArea);
let newState = {};
OrderList.forEach(element=>{
if(!newState[element.area])
newState[element.area] = [];
newState[element.area].push({label: element.label});
});
const keys = Object.keys(newState);
const Elements = keys.map((key) => <ShowArea key={key} area={key} >
{newState[key].map(ShowLabel)}
</ShowArea>);
return (<div>{Elements}</div>)
}
});
ReactDOM.render(
<Hello/>,document.getElementById('container')
);