React - Creating table using loop in class method

Question

I would like to generate a table in render() method of my class.

So in different example/project in past, I have pushed divs to an array and then return this array and it worked fine in terms of displaying but in this case when I call this.tableGenerator() it displays the result as a plain text, not rendered HTML.

Can you please tell me why this happens? Or maybe there is another method I can loop this table out?

tableGenerator = () => {

    let table = [];

    table.push('<tr>');
    //loop for columns

    table.push('</tr>');

    return table;

}

Here is example I was talking about: it generates a board of divs and now I want to change it to display as a table:

createMap = (cols, total) => {
    let table = []; let nL = ''; let idRow = 0; let idCol = 0;

    for (let i = 0; i < total; i++) {
      idCol++;
      if (i%cols === 0){
        nL = 'newLine';
        idRow += 1;
        idCol = 1;
      }
      else {
        nL = '';
      }

      let toggledBackground = '';

        switch (this.state.cellStates[i]) {
          case 1:
            toggledBackground = 'alive';
            break;

          case 2:
            toggledBackground = 'dead';
            break;

          default:
            toggledBackground = '';
        }

      table.push(<div id={"pos-"+idRow+"-"+idCol} className={"square "+nL+" "+toggledBackground} onClick={() => this.changeState(i)}></div>);
    }
    return table;
  }

Rodius · Accepted Answer · 2018-01-18 07:45:21Z

4

You need something like this:

tableGenerator = () => {
  return (
    <table>
      <tr>
        {columns.map(column => <th>{column.data}</th>)}
      </tr>
    </table>
  );
}

Where column.data is the info you want to display (I used data as a general value but it could be label, name, info, etc).

answered Jan 18, 2018 at 7:45

Rodius

2,32117 silver badges20 bronze badges

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

3 Comments

Mateusz Osuch Over a year ago

Okay, but then why the example above works like a charm (divs)? //i have updateted original post

rtytgat Over a year ago

Because in your new example you are pushing strings with tags, in your old example you are pushing proper divs with JSX. Note the apostrophes in the new one.

rtytgat Over a year ago

See: JSX and how it works reactjs.org/docs/introducing-jsx.html Plain tags in JSX is just syntactic sugar for React.createElement. If you write apostrophes around them you are just loading strings, not calling the important createElement function.

Collectives™ on Stack Overflow

React - Creating table using loop in class method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related