在JSX中反应迭代道具

Question

I was new in React , and I am confusing about iterating props data in JSX .

Assume the this.props.data is

[
  [
    "2017-1",
    {
      title: "title1"
      describe: "des1"
    }
  ],
  [
    "2017-2",
    {
      title: "title2"
      describe: "des2" 
    }
  ],...
]

How do I iterate data in table？

I was hoping it will render some kind of like this

<tbody>
  <tr>
    <td>2017-1</td>
    <td>title1</td>
    <td>des1</td>
  </tr>
  <tr>
    <td>2017-2</td>
    <td>title2</td>
    <td>des2</td>
  </tr>
  ...
</tbody>

Answer 1

I would map it. I'm assuming that the format will always be the same (out of laziness).

(Please do not run the snippet, it is only for formatting)

Fiddle: https://jsfiddle.net/gL8drpyd/1/

 var data = [ [ "2017-1", { title: "title1" describe: "des1" } ], [ "2017-2", { title: "title2" describe: "des2" } ] ]; let rows = data.map( (item) => ( <tr> <td>{item[0]}</td> <td>{item[1].title}</td> <td>{item[1].describe}</td> </tr> ) ); // put this in the <tbody> in render <tbody> {rows} </tbody>