I've created a simple object

const customer = { name : "foo", phone : "519-500-5000", orders : { crust: "normal", toppings :  ["Cheese", "Bacon"]} }

it holds a internal object called "orders" that has also has an array of toppings, in these case "Cheese" and "Bacon".

I've extracted the array out and passed it into a render toppings function

 renderToppings (toppings) {
    console.log("render Toppings: ", toppings) // Renders the whole array of toppings, good.
    toppings.forEach(function (topping) {
        //return (
        //    <li> {topping} </li>
        //)
        console.log("each Topping: ", topping) // This DOES render each topping separately as expected. 
    });
}

I created a list that has other values, then I eventually called my render method (which is within the same class)

{this.renderToppings (PizzaToppings)}

the console log does return the values I was expecting. But when I unment out the return, it doesn't do the console nor does it print the the toppings.

What am I missing here? Sorry if this is all sloppy, I'm new to react.

I've created a simple object

const customer = { name : "foo", phone : "519-500-5000", orders : { crust: "normal", toppings :  ["Cheese", "Bacon"]} }

it holds a internal object called "orders" that has also has an array of toppings, in these case "Cheese" and "Bacon".

I've extracted the array out and passed it into a render toppings function

 renderToppings (toppings) {
    console.log("render Toppings: ", toppings) // Renders the whole array of toppings, good.
    toppings.forEach(function (topping) {
        //return (
        //    <li> {topping} </li>
        //)
        console.log("each Topping: ", topping) // This DOES render each topping separately as expected. 
    });
}

I created a list that has other values, then I eventually called my render method (which is within the same class)

{this.renderToppings (PizzaToppings)}

the console log does return the values I was expecting. But when I unment out the return, it doesn't do the console nor does it print the the toppings.

What am I missing here? Sorry if this is all sloppy, I'm new to react.

• javascript
• arrays
• reactjs

Share Improve this question Follow asked Jul 12, 2018 at 20:52 RoboliskRobolisk 1,80255 gold badges2929 silver badges5959 bronze badges 1

• 4 return returns from the function; nothing after it will execute, which is why your console.log isn't happened. Also, you're not returning anything from renderToppings; you probably want to do something like return toppings.map rather than toppings.forEach – Hamms Commented Jul 12, 2018 at 20:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You aren't returning to anything. The return value of a forEach() callback is not used.

Use map() instead to generate an array of your elements and return that

return toppings.map(function (topping) {
    return (
        <li> {topping} </li>
    );
});

Demo

class Pizza extends React.Component {
  render() {
    var toppings = ['cheese', 'sausage', 'never pineapple'];
    var elements = toppings.map(topping => {
      return ( 
        <li> 
          {topping} 
        </li>
      );
    });

    return ( 
      <ul id = "toppings">
        {elements}
      </ul>
    );
  }
}

ReactDOM.render( 
  <Pizza /> ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

forEach doesn't return anything(returns undefined), you need to use map function

renderToppings (toppings) {

    return toppings.map((topping) => {
        return (
            <li> {topping} </li>
        )

    });
}

You are using .forEach and a forEach only calls a given method on each item of the array and does nothing with the return value.

Use .map instead, map returns a new array. It also calls a method on each item in the array but allows you to return a new value for each item it iterates.

renderToppings (toppings) {
    toppings.map(function (topping) {
        return (
            <li> {topping} </li>
        )
    });
}

Would work in your case

The callback in .forEach modifies the original array, but for React to render the element you should create a new array with .map