How to return data in a react .map statement?

Question

I want to use warningItem within my return statement in order to map some data into a react component.

I want to loop over area but have problems with syntax.

createWarnings = warningsRawData => {
    return warningsRawData.map(warningItem => {
        return (
            <div>
                <p className={styles.warningMainText} />
                <p>warningItem.area[0]</p>
            </div>
        );
    });
};

Assuming styles is defined somewhere, this seems to be fine. Maybe warningItem doesn't have the structure you think it has? — Felix Kling
– Felix Kling, Commented Apr 6, 2017 at 19:45
@FelixKling nope. i can reach my data before the second return via warningItem.area[0]. Inside the return... nothing. — Divide by Zero
– Divide by Zero, Commented Apr 6, 2017 at 19:47

John Ruddell · Accepted Answer · 2017-04-06 19:55:05Z

3

It looks like you are missing the brackets around it. Try:

createWarnings = warningsRawData => {
    return warningsRawData.map( (warningItem, i) => {
        return (
            <div key={i}>
                <p className={styles.warningMainText} />
                <p>{warningItem.area[0]}</p>
            </div>
        );
    });
};

edited Apr 6, 2017 at 19:55

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

answered Apr 6, 2017 at 19:47

Eric Levine

13.6k5 gold badges51 silver badges50 bronze badges

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

3 Comments

Felix Kling Over a year ago

Good catch... should be obvious though if warningItem.area[0] is literally printed on the page.

Divide by Zero Over a year ago

this works. I had a number of errors, but the i was a great addition. thnx!

John Ruddell Over a year ago

@Spacemoose you're welcome :) I edited Elevine's answer to add that so it wouldn't have a warning of a missing key :)

Ved · Accepted Answer · 2017-04-06 19:53:54Z

1

Whenever you loop to return elememnt in react, add key attribute is must. Else you will get warning.And add {warningItem.area[0]}

createWarnings = warningsRawData => {
   let values  =  warningsRawData.map((warningItem,index) => {
        return (
            <div key={index}>
                <p className={styles.warningMainText} />
                <p>{warningItem.area[0]}</p>
            </div>
        );
    });
    return values
}

;

edited Apr 6, 2017 at 19:53

answered Apr 6, 2017 at 19:48

Ved

12.1k5 gold badges46 silver badges61 bronze badges

4 Comments

Felix Kling Over a year ago

What did you change and why?

Ved Over a year ago

I added key={index}. Else it will throw warring.

Felix Kling Over a year ago

And you think because of the warning the element is not rendered? Or why else would this solve the OP's problem?

Divide by Zero Over a year ago

thnx. i ll check it out.

Collectives™ on Stack Overflow

How to return data in a react .map statement?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related