Reactjs looping through array and switch - json

Question

I have a reactjs component and I am trying to render the data with a loop and switch.
I tried a map and then a forEach -- but it claims its not a function.
the json looks like this.
//json
"contents": {
"0": ["emotional distress", "behavioural difficulties", "hyperactivity and concentration difficulties", "difficulties in getting along with other young people"],
"5": ["kind and helpful behaviour"]
}
//component
var YourCurrentStanding = React.createClass({
alertLevel: function (key) {
switch (key) {
case '0': return "very high";
case '1': return "high";
case '5': return "very low";
default: return "xy";
}
},
render: function () {
console.log('this.props.data.contents', this.props.data.contents)
return (
<div>
{
this.props.data.contents.forEach(function(j) {
return <p key={j}>Score for x,y and z {this.alertLevel(j)}</p>
})
}
</div>
);
}
});
----------- should read like
"<p>Score for emotional distress, behavioural difficulties, hyperactivity and concentration difficulties very high and difficulties in getting along with other young people very high</p>
<p>Score for kind and helpful behaviour very low</p>"
near working code with a grammar check added
var YourCurrentStanding = React.createClass({
grammarCheck : function(vals) {
//x,y,z and d
//z
return vals.join(', ')
},
alertLevel: function(key) {
switch (key) {
case "0":
return "very high";
case "1":
return "high";
case "5":
return "very low";
default:
return "xy";
}
},
render: function() {
return (
<div>
{Object.keys(this.props.data.contents).map((key, index) => {
return <p key={index}>Score for {this.grammarCheck(this.props.data.contents[key])} is <b>{this.alertLevel(key)}</b></p>
})}
</div>
);
}
});

Answer 1

Here it is: (Took sample data object for demo)
var data = {
contents: {
"0": [
"emotional distress",
"behavioural difficulties",
"hyperactivity and concentration difficulties",
"difficulties in getting along with other young people"
],
"5": ["kind and helpful behaviour"]
}
};
var YourCurrentStanding = React.createClass({
alertLevel: function(key) {
switch (key) {
case "0":
return "very high";
case "1":
return "high";
case "5":
return "very low";
default:
return "xy";
}
},
joinContents: function(data, key) {
return [ data[key].slice(0, -1).join(", "), data[key].slice(-1)[0]
].join(data[key].length < 2 ? "" : " and ");
/*
data[key].slice(0, -1).join(", "): takes all keys except last and joins them together with a comma.
data[key].slice(-1)[0]: Last key
*/
},
render: function() {
return (
<div>
{Object.keys(data.contents).map((key, index) => {
return (
<p key={index}>
Score for {this.joinContents(data.contents, key)} is {" "}
<b>{this.alertLevel(key)}</b>
</p>
);
})}
</div>
);
}
});
ReactDOM.render(<YourCurrentStanding />, document.getElementById("app"));
<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="app"/>

Answer 2

Just use arrow function this way. And as #cesar william said, take care of maping on object properties.
render: function () {
console.log('this.props.data.contents', this.props.data.contents)
return (
<div>
{
Object.keys(this.props.data.contents).map((key, index) =>
{
return <p key={index}>Score for xx {this.alertLevel(this.props.data.contents[j])}</p>
})
}
</div>
);
}
I didn't really look at your jsx paragraph but it's a good start.
Edit: you should never use index as key, find something that fits better, it was just for the example

Answer 3

You can't iterate object by forEach or map methods.
const contentKeys = Object.keys(this.props.data.contents);
contentKeys.map(function(key, index) {
const item = this.props.data.contents[index];
return <p key={index}>Score for xx {this.alertLevel(item)}{index !== contentKeys.length-1 ? ', ' : null}</p>
});
Call alertLevel method with index or item – it's up to you.