I have,

{
  mydata.map(({
    name
  }) => ( <p style = {{
        display: "inline" }} > { " " } { name }, </p>))
}

How can I remove the last ma in banana, apple, orange, the result of the code, that is, the one after orange and make it look something like this: banana, apple, orange?

Thank you very much!

I have,

{
  mydata.map(({
    name
  }) => ( <p style = {{
        display: "inline" }} > { " " } { name }, </p>))
}

How can I remove the last ma in banana, apple, orange, the result of the code, that is, the one after orange and make it look something like this: banana, apple, orange?

Thank you very much!

• javascript
• arrays
• reactjs

• Maybe using the index from the map callback index === mydata.length - 1 ? '' : ','? – evolutionxbox Commented Mar 29, 2021 at 10:01
• 1 Maybe better to use Array.join(', ');? – tarkh Commented Mar 29, 2021 at 10:03

4 Answers 4

{mydata.map(({name}, idex) => (
                            <p style={{display:"inline"}}>
                                {" "}{name} {index === mydata.length - 1 ? "" : ","}
                            </p>
                            ))}

Why are you using multiple p tags? I think, below code should do what you want to do.

     <p style={{display:"inline"}}>
         {mydata.map(item => item.name).join(', ')}
     </p>

As a matter of fact, you can do that with simple CSS:

{mydata.map(({name}) => (<span className='item'>{" "}{name}</span>))}

CSS:

.item:not(:last-child)::after { content: ',' }

Try this:

{
 mydata.map(({name}, i) => (
          <p style={{display:"inline"}}>
            {i + 1 !== mydata.length? `{name}, ` : name} 
          </p>
     )
  )
}