Best way to return array.map() in React?

Question

I'm kind of new to React and am following some video tutorials as also am I reading some books about it. (None older than 2016 - because It changes a lot)

During my journey, I passed by two ways to do the array.map() loop in React.

1. Do the map loop inside the parent component and just return the elements from the child component

class ItemsList extends React.Component {
  render() {
    const items = this.props.items.map((item) =>(
      <Item
        id={item.id}
        title={item.title}
      />
  ));
    return (
      <div id='items'>
        {item}
      </div>
    );
  } //render
}

class Item extends React.Component {
  render() {
    return (
      <li key={this.props.id}>
          {this.props.title}
      </li>
    );
  } //render
}

2. Do the map loop inside the child component and return the whole to the parent component

class ItemsList extends React.Component {
  render() {      
      ));
        return (
          <div id='items'>
            <Item
            id={item.id}
            title={item.title}
            />
          </div>
        );
      } //render
}

class Item extends React.Component {
  render() {
    const item = this.props.items.map((item) =>(
      <li key={item.id}>
          {item}
      </li>
    ));
    return(item);
  }
}

If i understand it correctly, one of the advantages of React is that it's a more "Team-friendly" way to work on an app because everyone can work on one component at a time without really interfering with somebody else work.

But based on this, I would opt for option 2, because we touch the parent component as little as possible and focus more on the child component.

But I also believe it's more smart to choose option 1, because we have all the data and bindings inside the parent component which makes it more structurized and less binding needy for the child component.

Sorry if I'm still missing some vocabulary to explain this better for the experienced React developers - but I hope I made myself clear about this.

Thanks for your time taken!

ztadic91 · Accepted Answer · 2018-08-06 10:34:20Z

1

As react is component based you should group your props to the component it belongs to. Option 2 doesn't make much sense as you have an ItemList component which accepts a list of items and obviously renders and maintains that list. The Item component is specific to one item and shouldn't know about other items. Additionally, with option 1 you are decoupling the item list from the actual Item.

The better approach is to have a parent component to render a collection of child items.

answered Aug 6, 2018 at 10:34

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

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

1 Comment

Advena Over a year ago

Sounds reasonable, I would love to accept this answer but I'm just curious if there are other's out there with different approaches.

peetya · Accepted Answer · 2018-08-06 14:05:25Z

1

In my opinion the Item component should be as much independent as possible of the ItemList component. I would suggest the following structure:

ItemList component:

const ItemList = ({ items }) => (
    <div>
        {items.map(item => (
            <Item key={item.id} item={item} />
        ))}
    </div>
);

Item component:

const Item = ({ item }) => (
    <p>The ID of the item is {item.id}</p>
);

It seems similar to your 1st approach except the key should belongs to the ItemList component and also I would avoid using <li> tags to make it reusable but it really depends on your usecases.

The 2nd approach is logically wrong and I agree what @ztadic91 mentioned, that the Item component shouldn't know about the others.

answered Aug 6, 2018 at 14:05

peetya

3,6282 gold badges18 silver badges30 bronze badges

2 Comments

Advena Over a year ago

However, If you have to make a list using <li> than what are the alternatives?

peetya Over a year ago

I would wrap the <Item> component in <li> tag inside the map function. Or if you are looking a more elegant way, you can create an as prop for example and pass there the main component of the child element. You can find a cool example in the React implementation of Semantic UI: github.com/Semantic-Org/Semantic-UI-React/blob/master/src/…

Collectives™ on Stack Overflow

Best way to return array.map() in React?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related