loop through array and return jsx - react

Question

I am trying to map through an array and return jsx however I'm using Typescript and so .map only returns functions (not jsx). How can I loop through the array and return some jsx for each array element in React?

I already have return (<div>{array.map(this.function)}</div>) so I'm returning a function on each array element but I would like to return both jsx and a function from map. I've tried this {array.map(() => {return this.function && <p>text</p>})} but it's just returning either the jsx or the function.

What I want to achieve: When I map through the array, I want to run a function on each array element as well as return a paragraph <p></p> on each element so that I can display some text next to the output of the function.

Any help would be appreciated!

map returns whatever the callback function returns, so if the map returns a function, then you are calling it wrong, perhaps try calling the callback twice? array.map((...args) => this.function(...args)()) — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Dec 15, 2020 at 10:45
Can you clarify what you mean by I would like to display some jsx next to the rendered function — user5734311
– user5734311, Commented Dec 15, 2020 at 10:50
Can you show the return of this.function? It is also important to make sure you are using HOC correctly to get a function using this. — Renan Bandeira
– Renan Bandeira, Commented Dec 15, 2020 at 10:55
Ah yes I see thanks, I returned some jsx but I need to return jsx and a function. Is it possible to return both jsx and a function from .map? I tried using && but it's returning either the jsx or the function? @KrzysztofKrzeszewski — SK1dev
– SK1dev, Commented Dec 15, 2020 at 10:57
i feel like this may be a case of an XY problem can you provide us with more details on what you are trying to achieve, instead of how you tried to achieve it? — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Dec 15, 2020 at 11:10

hjrshng · Accepted Answer · 2020-12-15 11:22:11Z

2

Don't forget to add the proper key:

{array.map((el) => (
    <React.Fragment key={}>
        {this.function(el)}
        <p>text</p>
    </React.Fragment>
 ))}

edited Dec 15, 2020 at 11:22

answered Dec 15, 2020 at 11:15

hjrshng

1,8553 gold badges19 silver badges35 bronze badges

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

1 Comment

SK1dev Over a year ago

Wow, thank you! The problem was that I wasn't actually calling the function, I added () and it worked. @HaJa

Collectives™ on Stack Overflow

loop through array and return jsx - react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related