Rendering ReactJS component based on a list of objects

Question

I have the following component:

articles_list.jsx

import React from 'react';
import './articles_list.css';

export default class ArticlesList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      articles: null
    }
  }

  componentWillMount() {
    fetch('/articles_all')
    .then(res => res.json())
    .then(json => {
      this.setState({
        articles: json.articles
      });
    });
  }

  render() {

    var teste = () => {
      if (this.state.articles === null) {
        return(<div>No articles</div>)
      } else {
          {this.state.articles.forEach( function(element, index) {
            console.log(element);
            return <div key={index}>{element.title}</div>;
          })}
      }
    }

    return(
      <div className="articles_list">
        <div className="articles_list_title">
          ARTICLES
        </div>
        <div>{teste()}</div>
      </div>
    );
  }
}

Although the JSON request is working fine and returning an array with five JSON objects, they just don't render!

I am new to ReactJS and read (and watched) lots of tutorials, but it seems I am missing something.

Any suggestions?

Array.prototype.forEach returns nothing, you want Array.prototype.map instead. — zerkms
– zerkms, Commented Jun 6, 2017 at 4:26

Shubham Khatri · Accepted Answer · 2017-11-06 07:37:05Z

1

return statement inside a forEach doesn't return the value instead it acts like a continue statement, you need to make use of map

var teste = () => {
  if (this.state.articles === null) {
    return(<div>No articles</div>)
  } else {
      {this.state.articles.map( function(element, index) {
        console.log(element);
        return <div key={index}>{element.title}</div>;
      })}
  }
}

else if you want to go with forEach you need to modify your code like

render() {

    var teste = []

      if (this.state.articles === null) {
        teste.push(<div>No articles</div>)
      } else {
          {this.state.articles.forEach( function(element, index) {
            console.log(element);
            teste.push( <div key={index}>{element.title}</div>);
          })}
      }
    }

    return(
      <div className="articles_list">
        <div className="articles_list_title">
          ARTICLES
        </div>
        <div>{teste}</div>
      </div>
    );
  }

edited Nov 6, 2017 at 7:37

answered Jun 6, 2017 at 4:32

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

5 Comments

Edvaldo Silva de Almeida Jr Over a year ago

It worked, thanks! But I still get a strange warning: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ArticlesList. Seems strange because I used key={index} in the div.

Shubham Khatri Over a year ago

In that case try to give a key for <div>No articles</div> as well

Edvaldo Silva de Almeida Jr Over a year ago

Thank you! Everything is fine now!

Shubham Khatri Over a year ago

Glad to have helped :)

Edvaldo Silva de Almeida Jr Over a year ago

I don't want to presume on your kindness, but could you take a look at this? stackoverflow.com/questions/44382657/…

Ravindra Ranwala · Accepted Answer · 2017-06-06 04:32:23Z

1

You may try something like this.

import _ from 'lodash';
renderArticles() {
  return _.map(this.state.articles, article => {
    return (
      <li className="list-group-item" key={article.id}>
          {article.title}
      </li>
    );
  });
}


  render() {
    return (
      <div>
        <h3>Articles</h3>
        <ul className="list-group">
          {this.renderArticles()}
        </ul>
      </div>
    );
  }

Map over the list and render it one by one. Here I am using lodash map helper to get this done. Hope this helps. Happy coding.

answered Jun 6, 2017 at 4:32

Ravindra Ranwala

21.2k7 gold badges50 silver badges65 bronze badges

1 Comment

zerkms Over a year ago

There really is no reason to use _.map as soon as you have Array.prototype.map

Collectives™ on Stack Overflow

Rendering ReactJS component based on a list of objects

articles_list.jsx

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

articles_list.jsx

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related