reactjs create dynamic wrapper element in map()

Question

i have issues to probably understand ReactJS well enough to create dynamic div wrapper in every five steps. To be more specific here is an example:

render() {
    return (
            <div className='holder'>
              {this.props.elements.map(
                (b,n) => 
                  {n%5 == 0 ? '<div class="grid grid-pad">' : ''}
                  <Component param={b} />
                  {n%5 == 0 ? '</div>' : ''}                 
              )}
            </div>
     )
}

The results should look like this:

<div class='grid grid-pad'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<div class='grid grid-pad'>
  <div class='child'></div>
  <div class='child'></div>
  ...
</div>
....

So the result would be that every 5 elements would be wrapped in div.

I am aware that this is not the right way, at this code actually it produces errors for not closed tags. Is there any way how to actually achieve similar functionality. Thank you in advance.

WiredPrairie · Accepted Answer · 2015-03-11 01:18:59Z

3

As you can't dynamically create a React component from a string quite like that. You'll just need to group the children manually and add them as a whole to a container within the render method.

Here's an example: http://jsfiddle.net/wiredprairie/ko8so1mu/.

If you were using something like lodash, you could reduce the number of lines of code below by using the take function.

render() {
    // make all elements into Components
    var elements = this.props.elements || [];
    var components = elements.map(
        (b) => {
            return <Component param={b} />;
        }
    );

    // then just group into chunks of 5 
    var groups = [];
    var children = [];
    while(components.length > 0) {
        children.push(components.shift());
        if (children.length === 5) {
            groups.push(<div className="grid grid-pad">{children}</div>);
            children = [];
        }
    }
    // remaining children
    if (children.length > 0 ) {
        groups.push(<div className="grid grid-pad">{children}</div>);
    }

    return (
        <div className='holder'>
          { groups }
        </div>
     );
 }

edited Mar 11, 2015 at 1:18

answered Mar 9, 2015 at 21:41

WiredPrairie

59.9k18 gold badges120 silver badges149 bronze badges

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

1 Comment

Lukáš Jahoda Over a year ago

Thank you, this is actually what I was looking for. But thanks to every body else too. It is great to have people around who can help!

knowbody · Accepted Answer · 2015-03-10 13:47:26Z

0

This is how you could do it:

/** @jsx React.DOM */

var Parent = React.createClass({
  getInitialState: function() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    }
  },
  render: function() {
    return(
      <div>
        <Child elements={this.state.list} />
      </div>
    );
  }
});

var Child = React.createClass({
  render: function() {
    var itemsList = this.props.elements.map(function(element, index) {
      if (index % 5 == 0) {
        return (
          <div> {element} </div>
        );
      }
    });

    return(
      <div>
        {itemsList}
      </div>
    );
  }
});

React.render(<Parent />, document.getElementById('app'));

You keep the data in the Parent component then pass it to the Child component in props.

if you do console.log(itemsList) you can see what is happening inside map() method.

Here is JSFiddle.

Edit:

After you updated your question, here is something I quickly hacked, this is not the best way of doing it, but it works:

/** @jsx React.DOM */

var Parent = React.createClass({
  getInitialState: function() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    }
  },
  render: function() {
    return(
      <div>
        <Child elements={this.state.list} />
      </div>
    );
  }
});


var Child = React.createClass({
  render: function() {
      var arr_index = -1;
      var itemsList = [];
      var items = this.props.elements.map(function(item, i) {
        if (i % 5 == 0) {
          arr_index += 1
        }
        itemsList.push(<div> {item}, conatiner: {arr_index} </div>)
      });
      return (
        <div>{itemsList}</div>
      );
    }
});

React.render(<Parent />, document.getElementById('app'));

You still need to tweak it a bit to meet your requirements, but basically it divides children into "containers", I guess that's what you were looking for.

edited Mar 10, 2015 at 13:47

answered Mar 9, 2015 at 20:31

knowbody

8,2966 gold badges48 silver badges70 bronze badges

5 Comments

Lukáš Jahoda Over a year ago

This is really nice, but actually I do not think it solves my issue. But that is probably my error to ask the question badly. I want it the result be something like this: <div class='parent'> <div class='child'></div> <div class='child'></div> <div class='child'></div> <div class='child'></div> <div class='child'></div> </div> So the result would be that every 5 elements would be wrapped in div.

knowbody Over a year ago

@LukášJahoda I've updated my answer, let me know if this is what you wanted

Lukáš Jahoda Over a year ago

Thank you! But I guess that this is what I am looking for, but I was not able to meet my wanted result.. :(

knowbody Over a year ago

@LukášJahoda do you still need help with this?

Lukáš Jahoda Over a year ago

if you still have time and good soul to help me with the exact result I need I would be really pleased. Thank you in advance.

Collectives™ on Stack Overflow

reactjs create dynamic wrapper element in map()

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related