ReactJS: Returning a React Component in a loop

Question

I'm trying to loop through an array and return a React Component on each element. The render functions are being called but nothing is showing up.

class ListOfFoundPages extends Component {
  constructor(props) {
    super(props);
    this._renderList = this._renderList.bind(this);
  }
  _renderList(data) {
    if (data !== null) {
      // eslint-disable-next-line
      data.list.map( (obj) => {
        return <ListItem obj={obj} />;
      });
    }
  }
  render() {
    return (
      <ul className="listOfFoundPages">
        {this._renderList(this.props.list)}
      </ul>
    );
  }
}

And this is the Component to be returned:

const ListItem = (props) => {
  return (
    <li>
      <div className="foundPagesItem">
        <img role="presentation" className="searchPageImg" src={props.obj.picture.data.url} />
        <span className="searchPageInfo">{props.obj.name} - {props.obj.category}</span>
      </div>
      <div className="seperator" />
    </li>
  );
};
export default ListItem;

jsfiddle.net/jwm6k66c/1785

zloctb
– zloctb

2017-06-14 12:30:20 +00:00
Commented Jun 14, 2017 at 12:30 — zloctb
– zloctb, Commented Jun 14, 2017 at 12:30

lest · Accepted Answer · 2016-10-08 10:58:16Z

1

_renderList function should return an array of components (the result of data.list.map...). Currently, it doesn't return anything. The code needs to look like:

_renderList(data) {
  if (data !== null) {
    // eslint-disable-next-line
    return data.list.map( (obj) => {
      return <ListItem obj={obj} />;
    });
  }
}

answered Oct 8, 2016 at 10:58

lest

8,2002 gold badges26 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: Returning a React Component in a loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related