How to render unknown/variable number of React elements

Question

I have this React component that looks like this:

 var TestResult = React.createFactory(React.createClass({

        displayName: 'test-result',

        getInitialState: function getInitialState() {
            return {
                active: false,
                testLines: []  //this value will update after AJAX/WebWorker completes
            };
        },

        makeNewState: function makeState(data) {
            this.setState(data);
        },

        componentDidMount: function () {

            var self = this;
            var testPath = this.props.testPath;

            setTimeout(function(){
                $.get(testPath).done(function (msg) {

                    var myWorker = new Worker('/js/workers/one.js');
                    myWorker.postMessage(msg);
                    myWorker.onmessage = function (msg) {

                        self.setState({testLines: msg.data.testLines});

                    };

                }).fail(function (err) {
                    console.error(err);
                });
            }, Math.random()*2000);

        },

        render: function() {

            var self = this;

            return React.createElement('p', {
                    className: this.state.active ? 'active' : '',
                    onClick: this.clickHandler,
                },
                self.state.testName, '  ', self.state.testLines, React.createElement('b', null, 'Pass/fail')
            );
        }

    }));

what I want is to render a variable number of components in the render function - the variable number is related to number of elements in the testLines array.

So, in order to do that, I might try changing the render method above:

 render: function() {

            var self = this;

            return React.createElement('p', {
                    className: this.state.active ? 'active' : '',
                },
                self.state.testName, '  ', React.createElement('div', self.state.testLines, React.createElement('b', null, 'Pass/fail')
            );
        }

so what I am trying to do is pass testLines, which is an array of React.createElement results, to React.createElement. Is this the correct way of doing it? "It" meaning rendering a variable number of React elements.

Matthew Herbst · Accepted Answer · 2015-12-28 20:21:37Z

7

What you have to do is map over the array and create each of the sub-elements, then render those:

render: function() {
  var lines = this.state.testLines.map(function(line, i) {
    // This is just an example - your return will pull information from `line`
    // Make sure to always pass a `key` prop when working with dynamic children: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
    return (
      <div key={i}>I am a line!</div>
    );
  });

  return (
    <div id='lineContainer'>
      {lines}
    </div>
  );
};

answered Dec 28, 2015 at 20:21

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

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

7 Comments

Alexander Mills Over a year ago

thanks I will give it a shot - do you know what this looks like without JSX?

Alexander Mills Over a year ago

for more info, my webworker is using ReactDOM.renderToString to post a string representation of a React component from the worker to the main UI thread - is it possible to include that string in the react parent component?

Matthew Herbst Over a year ago

I don't off the top of my head no. It should be the exact same thing, just replace the <div> with the React.createElement call. You'll likely have to have a React.createElement within a React.createElement to handle the {lines}, but I don't know for sure, sorry

Alexander Mills Over a year ago

I think it looks like this React.createElement('div',{key:i,line:line})

Alexander Mills Over a year ago

thanks np, yeah I added a new question here stackoverflow.com/questions/34500482/…

|

Collectives™ on Stack Overflow

How to render unknown/variable number of React elements

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related