Jul 10, 2017 · 1 min read
When you need to map an array present in props or state to elements, in order to avoid the creation of an arrow fn each time you render, it’s better to create an own prop with an arrow fn to contain the logic to render each item of the array. In this case it would be like:
renderUserListItem = user => (
<UserListItem
key={user.id}
user={user}
onClick={this.deleteUser}
/>
);
render() {
return (
<div>
<h1>Users</h1>
<ul>{this.state.users.map(this.renderUserListItem)})}</ul>
</div>
);
}
In addition to this, I would recommend you to move the initialization of state to outside the constructor to avoid having to declare it.
