Create a 2 column table from an array in JSX

Question

I am trying to generate 2 columns in each row of a table from an array in JSX. In Javascript it would be simple but JSX needs the opening and closing tag in the same area.

This is what I would do in Javascript:

var tTable = '<table>';

var newArray = ['2', '3', '4', '5', '6'];
var newTr = '';

for (var i = 0; i < newArray.length; i++) {
  if (i % 2 == 0) {
    newTr += (i > 0) ? '</tr><tr>' : '<tr>'
  }

  newTr += '<td>' + newArray[i] + '</td>';
}

newTr += '</tr>';
tTable += newTr + '</table>';
document.write(tTable);

This will produce an array as follows:

2 3
4 5
6

Arpit Agrawal · Accepted Answer · 2019-02-14 04:12:29Z

1

This should help :

showTable() {
    const tableRows = [];
    for (let i = 0; i < newArray.length; i = i + 2) {
          tableRows.push(
            <tr key={newArray[i] + "-" + newArray[i + 1] + "-" + i}>
                <td style={{ border: "1px solid black " }}>
                    {newArray[i]}
                </td>
                <td style={{ border: "1px solid black " }}>
                    {newArray[i + 1]}
                </td>
            </tr>
          );
    }
    return tableRows;
}



render() {
    return (
      <table style={{ border: "1px solid black " }}>
        <tbody>
          <th style={{ border: "1px solid black " }}>column1</th>
          <th style={{ border: "1px solid black " }}>column2</th>
        </tbody>
        <tbody>{this.showTable()}</tbody>
      </table>
    );
  }
}

Working solution :

edited Feb 14, 2019 at 4:12

answered Feb 13, 2019 at 19:58

Arpit Agrawal

1,1801 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Whitecat Over a year ago

Is there a way to test this on something like JSFiddle or JSbin?

Whitecat Over a year ago

Thank you! Now that I see it I updated the question to be more clear. Your solution produces table with 2 columns but just replicates each array value in each column, I would like to have 2 columns but each column has a different array value.

Arpit Agrawal Over a year ago

@Whitecat i have updated the solution. Please check if this is what you were looking for. Right now i couldn't think of anything better than using a loop for this. If i find something, i will surely update here. see if it works for you

Whitecat · Accepted Answer · 2019-02-13 21:07:22Z

0

You could try the following:

render() {
    return 
        <table>
            <tbody>
                {
                    newArray.map((entry, index) => {
                         if (index === newArray.length - 1) {
                            return <tr><td>entry</td></tr>
                         }
                         return (
                             <tr>entry</tr>
                             <tr/>
                         )
                    })
                }
            </tbody>
        </table>
    )
}

I know React complains if you dont nest your <tr>s in a <tbody>. Hopefully that should give you what you want. The translation to a functional component case should be trivial.

Hope that helps.

edited Feb 13, 2019 at 21:07

Whitecat

4,0389 gold badges54 silver badges80 bronze badges

answered Feb 13, 2019 at 19:41

Marcus

2,3612 gold badges18 silver badges22 bronze badges

3 Comments

Whitecat Over a year ago

can you put the html in back ticks like these: ` that way it shows up.

Whitecat Over a year ago

Sorry for the confusion. I meant the inline html code not the actual code itself.

darmis Over a year ago

I think this has some issues like an extra closing tag "<tr/>" could you make it work on codesandbox.io or somewhere else? like the answer by @Arpit Agrawal.

Collectives™ on Stack Overflow

Create a 2 column table from an array in JSX

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related