loop data from state with react.js - reactjs

Question

I'm doing my first reactjs app and i have run into some troubles.
This is my feature (child) component that i call from my base file.
var ReactDOM = require('react-dom');
var React = require('react');
var ConfigurationService = require('../configurationService');
class Feature extends React.Component {
constructor(props) {
super(props);
this.state = {
features: null
};
this.getConfiguration();
}
getConfiguration() {
var self = this;
var config = ConfigurationService.getConfiguration('test', 'test').then(function (config) {
self.setState({ features: config.data.Features })
});
}
render() {
if (this.state.features) {
return (<div> {
this.state.features.map(function (feature) {
<span>feature.Description</span>
})
}
</div>)
}
else {
return <div>no data</div>
}
}
}
module.exports = Feature;
It calls my api and collects data that looks like this:
For like a 10th of a second it shows the "no data" but then i guess that it succeeds to grab the data and that this.state.features no longer is null.
But even though features isn't null it doesn't show anything in the browser.

Answer 1

Because you are not returning anything inside map body, 2nd you need to use {} to print feature.Description because its a dynamic data, and 3rd is you need to assign unique key to each element inside loop otherwise it will throw warning.
Use this:
if (this.state.features) {
return (
<div>
{
this.state.features.map(function (feature, i) {
return <span key={feature.Id}>{feature.Description}</span>
})
}
</div>
)
....
Or you can use arrow function also, like this:
if (this.state.features) {
return (
<div>
{
this.state.features.map((feature) => <span key={feature.Id}> {feature.Description} </span>)
}
</div>
)
....

Answer 2

That's not how map works. You need to have a return statement inside the map which is basically for each element of the array return so and so.
return (
<div> {
this.state.features.map(function (feature) {
return (<span key={feature.Id}>{feature.Description}</span>)
})
}
</div>
)
Here for example for each feature it is returning a span with the contents as feature.Description.
Also like Mayank Shukla pointed out a key is important. keys are basically used by react to compare the new DOM when state changes to the old DOM and make only those changes which are required (instead of re-rendering the entire component). The keys have to be unique so use the feature.Id as a key as that is unique. Don't use array indices as keys as the array might change and then the indices will point to wrong elements in the new array.