Creating a looped HTML element in React

Question

I'm relatively new to React, I've looked a lot of places and can't find a way to specifically handle this. I have checked previous answers.

I am trying to get my application to loop through an array and also print a statement along with the array.

var user = ["Kevin", "Kyle", "Kylian"];

var Hello = <h1>
            Hello, {user}!
            </h1>

class App extends Component {
  render() {
    for(var i=0;i<user.length;i++){
    return Hello;
    }
  }
}

export default App;

Output:

Hello, KevinKyleKylian!

Expected Output:

Hello, Kevin!
Hello, Kyle!
Hello, Kylian!

As you can see, the loop for some reason doesn't continuously return the entire output and after the user iteration of {user} it just prints {user} until the array is ended. Why does this happen? How can I avoid this?

I've also tried return <h1> Hello, {user[i]} </h1>

asdfghjklm
– asdfghjklm

2016-10-29 22:43:53 +00:00
Commented Oct 29, 2016 at 22:43 — asdfghjklm
– asdfghjklm, Commented Oct 29, 2016 at 22:43

Omar Ali · Accepted Answer · 2016-10-30 00:29:50Z

1

It's probably because of this bit:

var Hello = <h1>
            Hello, {user}!
            </h1>

In that case 'user' is referring to the whole array, not just a specific element of that array.

Generally, if you're building elements dynamically in React it's good to put that in a separate function rather than the render method, I feel it's a bit neater. So something like this:

getUsers() {
  let userList = [];
  for (let i=0; i<user.length; i++) {
    userList.push(<div>Hello, {user[i]}</div>);
  }
  return userList;
}

render() {
  return(
    <div>
      {this.getUsers()}
    </div>
  );
}

edited Oct 30, 2016 at 0:29

Omar Ali

8,6274 gold badges35 silver badges58 bronze badges

answered Oct 29, 2016 at 22:49

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

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

4 Comments

asdfghjklm Over a year ago

Hey, this worked. I had to change render() { return( <div> this.getUsers(); </div> ); } to render() { return( <div> {this.getUsers()}; </div> ); }

asdfghjklm Over a year ago

React is difficult, I'm relatively new and it's just a lot to learn all at once! I did the entire CodeAcademy course and didn't learn a thing. So now I'm doing it again and building an app along side of it as I learn to have a more practical grasp of it.

Jayce444 Over a year ago

Yeah React is hard to learn initially, but once things start to click it's super fun and much easier. Just gotta get over that initial learning hump

asdfghjklm Over a year ago

Yeah, I figured. I think what is most confusing is transitioning from JS to JSX and then also incorporating the React commands as well. Cheers!

Collectives™ on Stack Overflow

Creating a looped HTML element in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related