映射函数反应中的条件表格单元格

const users = ["User 1", "User 2", "User 3"];

const projects = [
  {
    projectName: "project 1", 
    data: [
      {userName: "User 1", rate: 5, clientName: "client A", workedHours: 8},  
      {userName: "User 2", rate: 3, clientName: "client B", workedHours: 5}
    ]
  }, 
  {
    projectName: "project 2", 
    data: [
      {userName: "User 3", rate: 6, clientName: "client A", workedHours: 5}
    ]
  }
]

ReactDOM.render(
  <table>

    <tr>
      <td>Project:</td>
      {users.map(user => (
        <td><span>{user}</span></td>
      ))}
    </tr>

    {projects.map(project => (
      <tr>
        <td><span>{project.projectName}</span></td>

         {users.map(user => {
          
          // Filter for only users that has worked on the project
          const usersOnProject = project.data.filter(obj => obj.userName === user)
          
          // If there is users on the project, iterate them
          if(usersOnProject.length) {
            return (
              <td>
                {usersOnProject.map(obj => obj.userName === user && obj.workedHours)}
              </td>
            )
          }
          
          // Else if no users on the project, return 0
          return (
            <td>0</td>
          )
        })}
      </tr>
    ))}

  </table>,
  document.getElementById('root')
);

table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
}
table td + td, table th + th {
  text-align: center;
  border-collapse:
}

span {
  color: red;
}

td, th {
  padding: 3px;
  border-bottom: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>