React render array returned from map

Question

I am facing a very similar problem to this question, but I am fetching data using a Promise and want to render it into the DOM when it comes through. The console.log() displays all the items correctly. I think my problem is that the lodash.map returns an array of <li> elements, and so I am trying to call this.renderItems() in order to render (but renderItems() doesn't seem to exist). Am I doing something unconventional, is there an easier way, is there an equivalent function to replace my renderItems()?

   renderArticleHeadline: function(article) {
      console.log('renderArticleHeadline', article.headline);
      return (
         <li>
            {article.headline}
         </li>
      )
   },
   render: function() {
      return (
         <div>
            <ul>
               {
                  this.renderItems(
                     this.fetchFrontPageArticles().then(data => {
                        lodash.map(data, this.renderArticleHeadline)
                     })
                  )
               }
            </ul>
         </div>
      );
   }

Remember that render is called synchronously, yet your fetch is async. So, the render function has already completed by the time your data has returned. So, nothing will show. — WiredPrairie
– WiredPrairie, Commented Apr 4, 2015 at 12:48
IIRC render should not call fetch, the control flow should be in the reverse direction. — Bergi
– Bergi, Commented Apr 4, 2015 at 12:53
@Bergi it's not so much an IIRC (React is just a view library) as common sense :) That said the issue here is probably that renderItems is fed a promise. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 4, 2015 at 13:59

Eugene Glova · Accepted Answer · 2015-04-04 12:30:35Z

8

It should be something like this

getInitialState: function() {
    return {
        items: []
    };
},
renderArticleHeadline: function(article) {
    return (
         <li>
            {article.headline}
         </li>
    );
},
componentDidMount: function() {
    this.fetchFrontPageArticles().then(data => {
        this.setState({
            items: data
        });
    });
},
render: function() {
  var items = lodash.map(this.state.items, this.renderArticleHeadline);
  return (
     <div>
        <ul>
            {items}
        </ul>
     </div>
  );
}

P.S. read thinking in react

answered Apr 4, 2015 at 12:30

Eugene Glova

1,5531 gold badge9 silver badges12 bronze badges

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

2 Comments

Benjamin Gruenbaum Over a year ago

Yes this looks much more like it with fetchFrontPageArticles calling setState

engineerDave Over a year ago

FWIW newer React versions will probably complain if you don't have a key on the renderArticleHeadline <li> elements OR more properly move the <li> elements to another React class so that it can manage it as fragments.

Collectives™ on Stack Overflow

React render array returned from map

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related