Reactjs – Create-React-App Proxy in Production Build

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 – leading to 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 basically use the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding 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(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

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.

I just tried your code and its not a problem with hiding or showing the correct one, its your css style settings for the p tag that is making it look like that

Demo - What it does is show one on top of the other. Since you're using hide and show it does something different then what your intended css wants it to do.

It sets visibility:hidden, visibility:visible: instead of display:none which is what your css does. You need to set your css style setting in a different way. The following Demo example is probably what you want.

Your Answer