如何迁移我的旧 js 代码以做出反应？

Question

Hello everybody i'm working on reactjs i'm about migrating my js code to reactjs here i have an issue if you want to help me thanks for advance i puted this code edited by a good man

       {props
        .data
        .releases
        .map((release, i) => <Fragment key={i}>
          <tr>
            <td colspan={acts.length}>{release.id}</td>
          </tr>
          <tr>
            {Object
              .keys(release.storiesByTasks)
              .map((storyByTasksKeys, i) => <td key={i}>
                <ul>
                  {release
                    .storiesByTasks[storyByTasksKeys]
                    .map((taskss, j) => <li key={j}>{taskss.id}</li>)
}
                </ul>
              </td>)
}
          </tr>
        </Fragment>)
}

this is the data

this.state = {
      data: {
    activities: [
      {
        id: 'A1',
        tasks: [
          {
            id: 'A1.T1'
          },
          {
            id: 'A1.T2'
          }
        ]
      },
      {
        id: 'A2',
        tasks: [
          {
            id: 'A2.T1'
          }
        ]
      },
      {
        id: 'A3',
        tasks: []
      }
    ],
    releases: [
      {
        id: 'R1',
        storiesByTasks: {
          'A1.T1': [
            {
              id: 'A1.T1.S1'
            },
            {
              id: 'A1.T1.S2'
            }
          ],
          'A1.T2': [
            {
              id: 'A1.T2.S1'
            },
            {
              id: 'A1.T2.S2'
            },
            {
              id: 'A1.T2.S3'
            }
          ],
        }
      },
      {
        id: 'R2',
        storiesByTasks: {
          'A1.T2': [
            {
              id: 'A1.T2.S4'
            },
            {
              id: 'A1.T2.S5'
            }
          ],
          'A2.T1': [
            {
              id: 'A2.T1.S1'
            }
          ]
        }
      }
    ]
  };

in the old js code i created a table named taskss yellow one var taskss = []; where i pushed all the tasks from the data and i pushed emty object into it so i can display things like this

i want the same in react it gives me this

Answer 1

According to your data, this is how achieved that:

return (
  <table border="1">
    <tbody>
      <tr>{acts.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      <tr>{taskss.map((cell, i) => <td key={i}>{cell != null ? cell.id : " "}</td>)}</tr>
      {
         props
         .data
         .releases
         .map((release, i) =>
           <React.Fragment key={i}>
             <tr><td colspan={acts.length}>{release.id}</td></tr>
             <tr>
             {
               taskss.map((tasks, j) =>
                 <td key={j}>
                 { 
                   tasks.id && release.storiesByTasks[tasks.id] ?
                   <ul>
                   {release.storiesByTasks[tasks.id].map((story, k) =><li key={k}>{story.id}</li>)}
                   </ul> : null
                  }
                  </td>
                )
              }
            </tr>
          </React.Fragment>
        )
      }
    </tbody>
  </table>
);

JSFiddle here: https://jsfiddle.net/h3vj6gtu/2/#&togetherjs=lcOrSkFlET