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>
    );
  }

madox2 · Accepted Answer · 2016-02-29 22:25:20Z

2

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

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

answered Feb 29, 2016 at 22:25

madox2

52.3k21 gold badges106 silver badges101 bronze badges

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

1 Comment

beyonddc Over a year ago

ouch, the solution is as simple as that. I didn't realize I couldn't treat the markup as string. Thank you

Community · Accepted Answer · 2017-05-23 12:15:41Z

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, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 29, 2016 at 22:35

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

Comments

Alejo Fernandez · Accepted Answer · 2016-02-29 22:42:58Z

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, 2016 at 22:42

Alejo Fernandez

213 bronze badges

2 Comments

beyonddc Over a year ago

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

Alejo Fernandez Over a year ago

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: facebook.github.io/react/docs/…

Collectives™ on Stack Overflow

Reactjs not showing markup properly from render() function

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related