Reactjs not showing markup properly from render() function

Question

I am still in progress of learning Reactjs.

I am trying to populate table headers within a table row.

Somehow the code written below is treating the generated table headers via the renderTableHeaders() function as pure text only.

module.exports = React.createClass({

  getInitialState: function() {
    return {
      defaultTableHeaders: [
        'a', 'b', 'c', 'd',
      ]
    }
  },

  renderTableHeaders: function() {

      var markup = [];

      var defaultTableHeaders = this.state.defaultTableHeaders;

      for (var index = 0; index < defaultTableHeaders.length; index++) {
        markup.push('<th>' + defaultTableHeaders[index] + '</th>');
      }

      return markup;
  },

  render: function() {

    return (
      <thead>
        <tr>
          {this.renderTableHeaders()}
        </tr>
      </thead>
    );
  }

});

When I modify the render() function to below then it would work properly. Any idea why?

  render: function() {

    return (
      <thead>
        <tr>
          <th>a</th><th>b</th><th>c</th><th>d</th>
        </tr>
      </thead>
    );
  }

score 2 · Accepted Answer · answered Feb 29 '16 at 22:25

2

Use jsx syntax to create and push elements to the array:

markup.push(<th>{defaultTableHeaders[index]}</th>);

answered Feb 29 '16 at 22:25

madox2

49,493
17
99
99

1

ouch, the solution is as simple as that. I didn't realize I couldn't treat the markup as string. Thank you – beyonddc Feb 29 '16 at 22:30

score 2 · Answer 2 · edited May 23 '17 at 12:15

2

Yes, so in your renderTableHeaders() you're returning an array. So when you do: {this.renderTableHeaders()} its really just a javascript array with all the tags you need. Try using {markup} instead of calling the function directly. Check out this answer here: loop inside React JSX

edited May 23 '17 at 12:15

Community

1
1

answered Feb 29 '16 at 22:35

omarjmh

13,632
6
34
42

score 1 · Answer 3 · answered Feb 29 '16 at 22:42

1

The main issue is that your renderTableHeaders function returns a string instead of returning actual JSX markup.

Please try this:

module.exports = React.createClass({
  getInitialState: function() {
    return {
      defaultTableHeaders: [
        'a', 'b', 'c', 'd',
      ]
    }
  },

  renderTableHeaders: function() {
    var defaultTableHeaders = this.state.defaultTableHeaders;

    return defaultTableHeaders.map(function (header) {
      return (
        <th>{header}</th>
      );
    })
  },

  render: function() {
    return (
      <thead>
        <tr>
          {this.renderTableHeaders()}
        </tr>
      </thead>
    );
  }
});

answered Feb 29 '16 at 22:42

Alejo Fernandez

21
3

What are the differences between creating a for loop and push each markup statement into an array in my original code versus using the map() function in the renderTableHeaders() function? Thanks – beyonddc Feb 29 '16 at 23:13
Since `map` returns a transformed version of your original array it's more suitable for this type of cases, it requires less code and it looks a bit more readable. Plus, is the recommended way in React samples: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children – Alejo Fernandez Mar 01 '16 at 00:27

Reactjs not showing markup properly from render() function

3 Answers3