Saturday, September 28, 2019

javascript - Loop inside React JSX



I'm trying to do something like the following in React JSX (where ObjectRow is a separate component):




for (var i=0; i < numrows; i++) {

}




I realize and understand why this isn't valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).


Answer



Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:



return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)



See how the function tbody is being passed a for loop as an argument, and of course that's a syntax error.



But you can make an array, and then pass that in as an argument:



var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}

return tbody(rows);





You can use basically the same structure when working with JSX:



var rows = [];
for (var i = 0; i < numrows; i++) {
// note: we add a key prop here to allow react to uniquely identify each

// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push();
}
return {rows};


Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.


No comments:

Post a Comment

hard drive - Leaving bad sectors in unformatted partition?

Laptop was acting really weird, and copy and seek times were really slow, so I decided to scan the hard drive surface. I have a couple hundr...