How to construct JSX using a loop

Question

I'm new to React/Javascript and am trying to construct a JSX 'tree' using a loop to avoid hard-coding the data.

I guess my primary trouble lies with being unable to construct JSX piecemeal; Visual Studio Code wants the closing tag for my top-level opening JSX tag. In this case, . But since I'm building it in pieces, that's just not possible.

So I tried taking out of my logic and just having that in the render() function, with a separate function call in the middle of those tags. But that leaves me with...

index.js:2178 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by Container)
    in Container (at RequestPlaceholders.js:45)
    in div (at RequestPlaceholders.js:41)
    in RequestPlaceholders (at App.js:80)
    in div (at App.js:79)
    in div (at App.js:65)
    in div (at App.js:64)
    in App (at index.js:8)

My code is here https://github.com/runelynx/WebServiceToolkit/blob/master/src/components/RequestPlaceholders/RequestPlaceholders.js if I'm not conveying my question accurately.

Can anyone point me in the right direction?

Answer 1

You need to call your renderPlaceholders function.

render() {
  return (
    <div>
      <h2 className="subtitle">
        {this.props.selectedAPI} Placeholders
      </h2>
      <Container>
        {this.renderPlaceholders()}
      </Container>
    </div>
  );
}

Also update your for loop you have an infinite bug. Change i+2 with i+=2

for (var i = 0; i < this.props.apiPlaceholders.length; i+=2)