Javascript .map() issues

Question

I've been learning how to work with .map() function as it used pretty often for dealing with API results,

However I have a few questions that I wasn't able to solve on my own -

<div className="boxer">

    {users.map((user) => (
        <div className="scoreBoxx" key={user.id} id={user.id}>
            <h2 className="CardTitle">{user.videogame.name}</h2>
        {user.opponents.map((sub) => 
            <p key={sub.id} className={sub.acronym}>
                <b>Team :</b> {sub.opponent.name}  
            </p>
        )}

</div>

This is printing data out for me like this -

Team : ZdrastvyteTimur
Team : xStiKz

What I'm trying to achieve is:

Team : ZdrastvyteTimur - xStiKz

This is what my data looks like:

I apologise if this question has been asked prior, I have tried searching but wasn't able to find anything similar,

I have also tried fixing my problem by using slice() but haven't been able to work it out yet,

You might want to consider moving your (inconsistently indented...) React JSX to separate functions to keep your code readable. — Dai
– Dai, Commented Mar 30, 2022 at 13:54
Your posted JSX doesn't have the closing )} for the users.map callback, only the user.oppoonents.map callback. — Dai
– Dai, Commented Mar 30, 2022 at 13:56
Also, "ZdrastvyteTimur" and "xStiKz" doesn't appear in the JSON you've posted. — Dai
– Dai, Commented Mar 30, 2022 at 14:00
@Dai Hey, thank you for the edit and support - I know about the closing )} tags but as it wasn't important piece of code information I didn't include everything, I'm not getting any errors as I mentioned - Just trying to experiment and learn more about array manipulation, Also regarding the JSON data - Its a live API so it keeps changing, 'xStiKz' was just an example for explain my question, Sorry about any issues this may have caused. — Kentrell Jr
– Kentrell Jr, Commented Mar 30, 2022 at 14:05

Rukka · Accepted Answer · 2022-03-30 13:55:38Z

1

You could use reduce instead of map.

For example :

<b>Team : </b> {user.opponents.reduce((previous, current) => previous + ' - ' + current.opponent.name, '')}

answered Mar 30, 2022 at 13:55

Rukka

4182 silver badges9 bronze badges

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

4 Comments

Dai Over a year ago

Repetitive string concatenation using + is potentially expensive in JavaScript, consider using join instead.

Rukka Over a year ago

@Dai Yes, if you combine it with map.

Rukka Over a year ago

user.opponents.map( o => o.opponent.name ).join( " - " )

Kentrell Jr Over a year ago

@Rukka that did it, I had no idea it was this simple, Many thanks for your time and effort, Really appreciate it a lot.

VersifiXion · Accepted Answer · 2022-03-30 13:50:55Z

0

Maybe try this :

<b>Team :</b> {user.opponents.map((sub) => 
              <span key={sub.id} className={sub.acronym}>
          {sub.opponent.name}  
           </span>
        
            )}

answered Mar 30, 2022 at 13:50

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Javascript .map() issues

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related