Optimizing React code

Question

Is there any chance to make this code DRY?

let allPosts = this.state.posts.map((item, i, arr) => {
  if (i === arr.length - 1) {
    return <Post
      key={item._id}
      post={item}
      nickname={this.props.nickname}
      ref={this.lastPostRef}
    /> 
  }

  return <Post
    key={item._id}
    post={item}
    nickname={this.props.nickname}
  />
});

The perfect solution would be

...
nickname={this.props.nickname}
if (i === arr.length - 1) {
  ref={this.lastPostRef}
} ...

but it doesn't work in React.

ref={(i === arr.length - 1) && this.lastPostRef} should do it — Hamms
– Hamms, Commented Aug 4, 2018 at 19:21
Possible duplicate of React: inline conditionally pass prop to component — Andy Ray
– Andy Ray, Commented Aug 4, 2018 at 19:28

Slava Knyazev · Accepted Answer · 2018-08-04 19:23:09Z

3

There is a cleaner way to do this without any conditions:

let allPosts = this.state.posts.map((item, i, arr) => {
  return <Post
      key={item._id}
      post={item}
      nickname={this.props.nickname}
      ref={el => this.lastPostRef = el}
    /> 
});

On every iteration of the loop, the last post ref will be updated with the latest element. By the end of the map, the last post will be set the to last post ref. Magic!

answered Aug 4, 2018 at 19:23

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

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

1 Comment

Andrew Korin Over a year ago

It's a real magic because I don't understand now why I am able to get the post with this.lastPostRef and this.lastPostRef.current doesn't work for me. But I really like this variant.

Jonas Wilms · Accepted Answer · 2018-08-04 19:21:42Z

2

Why not just let the property be undefined?

 return <Post 
    key={item._id}
    post={item}
    nickname={this.props.nickname}
    ref={ i === arr.length - 1 ? this.lastPostRef : undefined }
 />

answered Aug 4, 2018 at 19:21

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Optimizing React code

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related