CODEWITHSUNDEEP
javascriptarraysreactjs
Robolisk
Robolisk

Reputation: 1792

React render array to add to a list - simple return not working

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 uncomment 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.

Upvotes: 3

Views: 1737

Answers (4)

Avocato
Avocato

Reputation: 1

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

Upvotes: -1

Sebastiaan van Arkens
Sebastiaan van Arkens

Reputation: 447

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

Upvotes: 3

Patrick Evans
Patrick Evans

Reputation: 42736

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 5

Avinash
Avinash

Reputation: 1994

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

renderToppings (toppings) {

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

    });
}

Upvotes: 3

Related Questions