loop data from state with react.js

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.

Mayank Shukla · Accepted Answer · 2017-05-05 06:16:36Z

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>
    )
    ....

edited May 5, 2017 at 6:16

answered May 5, 2017 at 5:59

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Daniel Gustafsson Over a year ago

Thanks!! :) It is sort of weird that you have to return a value inside of the html i think. But i guess that is just something that you have to get use to :P

Mayank Shukla Over a year ago

it's not html, map expect a function that will get called for each element, it will be similar to giving a function name and defining that name outside of render method, and you need to return some value from that function :)

mrinalmech Over a year ago

One thing though, array index as key is an anti-pattern as the array can change but the index will point to a different element then and cause problems with React's diffing algorithm. Since the feature object has an Id that should be used. Also don't worry about the syntax. It's not HTML but JSX which is Javascript.

Mayank Shukla Over a year ago

@mrinalmech thanks, i was not sure about the uniqueness of id's, that's why i used index :)

mrinalmech Over a year ago

@Mayank - No worries. Ids from backend APIs are almost always unique as they are usually generated by the database.

mrinalmech · Accepted Answer · 2017-05-05 06:14:28Z

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.

Collectives™ on Stack Overflow

loop data from state with react.js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related