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