Struggling to render multiple components onto a page using a function + for loop

Question

I want to render components into my React app using a for loop inside of a function.

But when I add n > 1 number of components to the variable I am returning inside of the function, the page ends up rendering:

[object Object][object Object][object Object]

My desire is to have the output be more like: <Headline/><Headline/><Headline/>

Here is my code:

import React, { Component } from "react";

import Headline from "./Headline";

class TestPalette extends Component {
    testFunc() {
        let value;

        for (let i = 0; i < 5; i++) {
            value += <Headline></Headline>;
        }

        return value;
    }

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

export default TestPalette;

This returns fine:

testFunc() {
        let value = <Headline></Headline>;

        return value;
    }

I'm suspicious it would work if I wrapped the value variable in tags, but I don't know how to do that. The following code tries to wrap value in tags:

    testFunc() {
        let value;

        value = <div>;

        for (let i = 0; i < 5; i++) {
                value += <Headline></Headline>;
        }

        value += </div>;

        return value;
    }

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Dan O, Jan 20 '20 at 01:00
there are many questions on Stack Overflow regarding how to render React components inside a loop. which of them have you tried and why specifically did they not solve your problem? — Dan O, Jan 20 '20 at 01:03
You need to provide an initial value for `value`. What you did will yield `undefined/Headline>....` which isn't valid JSX or html. — Drew Reese, Jan 20 '20 at 01:20
@DanO I had to check twice but I did find an example that seems to help (loop .push() onto an array and then {render} the array) as in this example https://stackoverflow.com/a/29149361/11591197... still hoping for an option that allows me to add
tags surrounding the contents of the for loop as is described in the bottom example though. I prefer the solution to have a for loop working in a function before returning a variable filled with components and jsx, and I didn't manage to find that in my search — Roly Poly, Jan 20 '20 at 01:37
Does this answer your question? [How can I render repeating React elements?](https://stackoverflow.com/questions/25646502/how-can-i-render-repeating-react-elements) — Ray, Jan 20 '20 at 01:38
Does this answer your question too?https://stackoverflow.com/questions/29149169/how-to-loop-and-render-elements-in-react-js-without-an-array-of-objects-to-map — Ray, Jan 20 '20 at 01:39
@Raymond https://stackoverflow.com/questions/29149169/how-to-loop-and-render-elements-in-react-js-without-an-array-of-objects-to-map worked for me, thanks — Roly Poly, Jan 20 '20 at 01:41

score 0 · Answer 1 · answered Jan 20 '20 at 07:35

You will need to create an array of children.

import React, { Component } from "react";

import Headline from "./Headline";

class TestPalette extends Component {
    testFunc() {
        let value = [];

        for (let i = 0; i < 5; i++) {
            value.push(<Headline />);
        }

        return value;
    }

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

export default TestPalette;

Struggling to render multiple components onto a page using a function + for loop

1 Answers1