Proper way to render integer array as a string with commas in JSX

Question

Is there a way to render something like this: ["1", "2","3"] as1,2,3,4,5 in React?

render(){
  <p>{this.numberResult()} </p> 
}

this.numerResult returns ["1", "2","3"] which ends up looking like: 123 in the browser but I would like it to return 1,2,3

Ketan Ramteke · Accepted Answer · 2021-01-08 20:37:15Z

3

Sample Example:

const joined = ["1", "2","3"].join(",")
console.log(joined);

render(){
  <p>{this.numberResult().join(",")} </p> 
}

answered Jan 8, 2021 at 20:30

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

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

Comments

Marcus Yoda · Accepted Answer · 2021-01-08 20:31:04Z

2

If you want to show numbers comma separeted, use join:

render(){
  <p>{(this.numberResult() || []).join(', ')} </p> 
}

answered Jan 8, 2021 at 20:31

Marcus Yoda

2411 silver badge8 bronze badges

Or Assayag · Accepted Answer · 2021-01-08 20:31:18Z

1

render(){
  <p>{this.numberResult().join(", ")</p> 
}

answered Jan 8, 2021 at 20:31

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges