es6 for-in loop returns first object

Question

New to ES6 so I'm looking for a short replacement of forEach() and I've found this.

React:

...

_productLoop(){
    for (var product of this.props.data) {
      const varient = product.variants.map(v => v);
      console.log(varient[0]);
      return(
        <tr>
          <td>{product.title}</td>
        </tr>
      )
    }
  }

 render(){
  return(
    <table>
      [...]
      <tbody>
        {this._productLoop()}
      </tbody>
    </table>
  )
 }

...

I have two arrays but only one object is showing for my loop. Any error here?

A `return` statement exits the function immediately. If you `return` inside a loop then the function will exit on the first iteration. — Pointy, Aug 27 '16 at 17:08
Ahhh I see. If I place the return outside, my browser console blows up. How to properly structure this? Any docs for this? — Sylar, Aug 27 '16 at 17:14
The question says for-in but it is actually for-of, which is completely different beast. For such cases map-reduce constructions may be more straightforward (although less readable). — Estus Flask, Aug 27 '16 at 19:29
Possible duplicate of [Returning values out of for loop in javascript](http://stackoverflow.com/questions/8131838/returning-values-out-of-for-loop-in-javascript) — Michał Perłakowski, Aug 27 '16 at 20:11

score 2 · Answer 1 · 2016-08-27T19:45:48.613

The return statement is breaking the loop. Besides that, the return statement can't concatenate what will be returned from the function. Once you execute return, you can't execute return again.

The solution is to create a string and concatenate the results with itself, then return it later. This is what you have expected.

Edit: I never written in react.js, but I'll update this answer soon. This isn't your case...

var result = "";

for (var product of this.props.data) {
    result += "\
        <tr>\
            <td>" + product.title + "</td>\
        </tr>";
}

return result;

score 1 · Answer 2 · answered Aug 27 '16 at 17:22

1

I'm not sure what you're logging the varient (typo, by the way) for, but to start off with, you probably want something more like this:

...
 render() {
  return (
    <table>
      [...]
      <tbody>
        {this.props.data.map(product =>
          <tr>
            <td>{product.title}</td>
          </tr>
        )}
      </tbody>
    </table>
  )
 }

...

answered Aug 27 '16 at 17:22

RogerH

21
6

I need this to be in a function :( – Sylar Aug 27 '16 at 17:49
1

You can move `this.props.data.map...` to its own function as you had in your example. – RogerH Aug 27 '16 at 17:52

score 1 · Answer 3 · answered Aug 27 '16 at 17:35

you can do it by using below code this.props.data.map(showProduct) to loop each of your props data and call the showProduct function and to show the title

render() {
  const showProduct = (item) => {
  return (<tr>
        <td>{product.title}</td>
      </tr>);
  };
  return (
    <table>
      [...]
      <tbody>
        {this.props.data.map(showProduct)}
      </tbody>
    </table>
  )
 }

score 0 · Answer 4 · answered Aug 27 '16 at 17:53

I needed this to be in a function:

_productLoop(){
    let products = this.props.data.map(product => {
      let varient = product.variants.map(v => v);
      console.log(varient[0]);
      return(
        <tr key={product.id}>
          <td>{product.title}</td>
        </tr>
      )
    });
    return(<tbody>{products}</tbody>);
  }


render() {
  return (
    <table>
      [...]
      {this._productLoop()}
    </table>
  )
 }

es6 for-in loop returns first object

4 Answers4