How to properly render data?

Question

React

I have this structure:

[
  {
    name: "test",
    tests: ["one", "two"]
  }
];

I need to render tests content. Only if there are more than 1, after each there is a coma and a space
. As I thought to solve:

renderTest = test => {
    return test.map((el, index) => {
      return test.length > 1 ? (
        <span key={index}>{el}, {" "} </span>
      ) : (
        <span key={index}>{el}</span>
      );
    });
  };

But something seems to me a shit code, because it can come out one , two ,
Tell me how it will be right ??

Answer 1

<span>{test.tests.join(', ')}</span>