Use For loop inside JSX [duplicate]

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>;

nanobar · Accepted Answer · 2021-04-01 15:39:24Z

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 1, 2021 at 15:39

answered Sep 14, 2017 at 10:55

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

morne Over a year ago

Hi Dominic. If its (entry) a Key Value pair. How do you seperate the values? Please.

nanobar Over a year ago

entry is an object? In that case you could do Object.keys(entry).map(...

morne Over a year ago

Yeah, sorry. just saw that. thanks

Rohan Dhar Over a year ago

map is the correct way to go as it returns a modified array.

Murat Karagöz · Accepted Answer · 2017-09-14 10:55:30Z

1

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>
                })
}

answered Sep 14, 2017 at 10:55

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Comments

bennygenel · Accepted Answer · 2017-09-14 10:55:57Z

1

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>;

answered Sep 14, 2017 at 10:55

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Collectives™ on Stack Overflow

Use For loop inside JSX [duplicate]

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related