Displaying comma separated elements using map function from Array of Objects – ReactJS

lets take an example of the following Array

const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

lets use map function to display names of class-5 in the same row.

App.js


import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name);

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}

Output : ABC

if we use .toString() to the map function, comma separated names will display.

import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name).toString();

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}


Output : A,B,C