How to generate react html in a loop

Question

Okay so this is has been driving me mad for the past few hours. Pretty much i want to have a function that generates html based off of objects in an array that are passed to it as an argument. My Code looks something like this:

handleEvents = (array) => {
if(array.length > 0){
  array.forEach(function(each){
    return(<h1>hello {each.name}</h1>)
  })
}

And in my render component i have this:

<div className="caption left-align">
  <h3>Upcoming events</h3>
    {this.handleEvents([{name: "Dave"}, {name: "Mary"}, {name: "Chris"}])}
 </div>

But when i run this code nothing is being output to the screen. What should i do?

It would be helpful if you go through the [Question Guidelines](https://stackoverflow.com/help/on-topic) and frame your question in a better way to reflect the problem. You can refer [this helpful link](https://stackoverflow.com/help/mcve). Good luck! — Stuti Rastogi, Feb 03 '18 at 03:15

score 3 · Accepted Answer · answered Jan 16 '18 at 06:27

The only problem is that Arrays.forEach does not return anything. If you change your handleEvents function to look more like

if(array.length > 0){
  return array.map(function(each){
    return(<h1>hello {each.name}</h1>)
  })
} else {
  return []
}

This should return an h1. The map function will return a list of the elements returned

score 3 · Answer 2 · answered Jan 16 '18 at 06:37

3

Or using forEach

 handleEvents = (array) => {
 if(array.length > 0){
  let tempArray = []
  array.forEach(function(each){
    tempArray.push(<h1>hello {each.name}</h1>)
 })
  return tempArray
}

answered Jan 16 '18 at 06:37

ashwintastic

2,262
3
22
49

score 1 · Answer 3 · answered Jan 16 '18 at 07:18

We can use expression function while using array.map(). Changing the code by replacing anonymous function with expression function like below we can achieve the same.

array.length > 0 ?
   array.map((item, index) => {
      return (
         <li className="list-item" key={index}>{item.Title}</li>
        );
      }) :  "No item found."

score 0 · Answer 4 · answered Jan 16 '18 at 06:44

forEach function return undefines. Therefore, your code does not show anything. You can use map function which creates a new array with the results of calling a provided function on every element in the calling array.

if(array.length > 0){
  return array.map(function(each){
    return(<h1>hello {each.name}</h1>)
  })
}

margaretkru · Answer 5 · 2018-01-16T08:21:17.197

If you just need to display some markup for each element of the array (without extra logic) you can use map directly in your jsx in render. Here is an example:

render() {
    const array = [{name: "Dave"}, {name: "Mary"}, {name: "Chris"}];

    return (<div className="caption left-align">
      <h3>Upcoming events</h3>
      {array && array.map((el) => <h1>hello {el.name}</h1>)}
    </div>);
}

You don't have to check if array.length is bigger than 0 since if the array is empty nothing will be rendered anyway so the check will be redundant. You might however check if it is not null or undefined (checked for truthy in the example above) because if it is and you try to invoke map on it, the code will throw an exception.

How to generate react html in a loop

5 Answers5