React，在 main 函数的返回中显示一个自定义数组

问：

我有一个带有 home.jsx 文件的 react 项目，我在其中创建了一个 JSON 数组：

function Home() {
  const posts = [
    {
      id:1,
      title:"Point Break",
      year:"1992",
      category:["Action","Hold-up","Crime","Surfing","Cult Movie"],
      description:"The film features Reeves as an undercover FBI agent....",
      image: "/movies/1.png"
    },{..}
//etc..

然后，在home函数的返回中，我像这样呈现该列表：

return (
posts.map(
          post=>(
            <div className="post" key={ post.id}>
              <div className="img">
              </div>
              <div className="content">
                <h1>{post.title}</h1>         
                <p>Category: 
                  {  
                    post.category.map( element =>( element+", "))
                  }</p>                  
                <p>{post.description}</p>                    
              </div>                 
            </div>
))}

当我想用它的数组呈现类别键时，问题就来了，单词之间有一个逗号，但不是最后一个，因为后面没有单词 输出如下所示

我想避免图像中的最后一个逗号，但显然我无法在返回中创建任何逻辑。我怎样才能做到这一点？我需要在退货之外做一个功能吗？

我已经尝试过这样的事情：

  const filterCommas = (list,listlength) => {
    var $i=0;
    var renderlist=""
    list.forEach(element => {
      if($i<=listlength-1){
        renderlist += element + ", "
      }
      $i+=1;
    });
    return filteredList;
  }

但是我无法从返回函数中调用它。如何过滤逗号？