React/JSX -迭代JSON对象并在.row中嵌套每X个项目

import React from 'react';

const jsonData = '{"projects": [{"name": "Project 1"}, {"name": "Project 2"}, {"name": "Project 3"}, {"name": "Project 4"}, {"name": "Project 5"}, {"name": "Project 6"}]}';
const data = JSON.parse(jsonData);

const ProjectsList = () => {
  const renderProjects = () => {
    let counter = 0;
    return data.projects.map((project, index) => {
      counter++;
      if (counter % X === 0) {
        return (
          <div className="row" key={index}>
            <div className="col">{project.name}</div>
          </div>
        );
      } else {
        return <div className="col" key={index}>{project.name}</div>;
      }
    });
  };

  return <div>{renderProjects()}</div>;
};

export default ProjectsList;