Use For loop inside JSX

Question

Can you use a for loop in JSX like this?
Or rather, what is the propper way to write a for like this?

var graph = 
        <div className={"chartContent"}>

        .
        .
        .

            <div className="panel">
                {DataRows.forEach(function(entry) &&
                    <div className="col-sm-2 graphPanel graphPanelExtra">
                        <div className="panel panel-primary">
                            <div>entry</div>
                        </div>
                    </div>
                )}

            </div>
        </div>;

Dominic · Accepted Answer · 2021-04-01T15:39:24.827

8

Use a map so you're actually returning the elements. A foreach doesn't return anything. Your use of && was also invalid.

var graph = 
        <div className="chartContent">
            <div className="panel">
                {DataRows.map(entry =>
                    <div key={entry.id} className="col-sm-2 graphPanel graphPanelExtra">
                        <div className="panel panel-primary">
                            <div style={{ textAlign: 'center' }}>entry</div>
                        </div>
                    </div>
                )}
            </div>
        </div>;

Note that I added a key property - for react to optimise rendering of an array of elements each item should have a unique key (that isn't just the numeric index).

edited Apr 01 '21 at 15:39

answered Sep 14 '17 at 10:55

Dominic

62,658
20
139
163

Hi Dominic. If its `(entry)` a Key Value pair. How do you seperate the values? Please. – morne Sep 14 '17 at 11:10
entry is an object? In that case you could do `Object.keys(entry).map(...` – Dominic Sep 14 '17 at 11:18
1

Yeah, sorry. just saw that. thanks – morne Sep 14 '17 at 11:18
map is the correct way to go as it returns a modified array. – Rohan Dhar Nov 12 '18 at 19:33

score 1 · Answer 2 · answered Sep 14 '17 at 10:55

The forEach does not return anything. You wont see any results out of it. Instead you could use .map e.g.

 {
     DataRows.map(function (entry) {
             return <div className="col-sm-2 graphPanel graphPanelExtra">
                        <div className="panel panel-primary">
                            <div style={{textAlign: 'center'}}>entry</div>
                        </div> < /div>
                })
}

score 1 · Answer 3 · answered Sep 14 '17 at 10:55

Rather than using a forEach loop you can use Array.prototype.map()

var graph = 
    <div className={"chartContent"}>

    .
    .
    .

        <div className="panel">
            {DataRows.map((entry) => (
                <div className="col-sm-2 graphPanel graphPanelExtra">
                    <div className="panel panel-primary">
                        <div style={{textAlign: 'center'}}>entry</div>
                    </div>
                </div>
               )
            )}

        </div>
    </div>;

Use For loop inside JSX

3 Answers3