Example of calling extracted child component in render to avoid binding or declaring an arrow function

callingChildComponentInRender.js

import React from 'react';
import UserListItem from './UserListItem';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: 'Cory' }, 
        { id: 2, name: 'Meg' }
      ]
    };
  }
  
  deleteUser = id => {
    this.setState(prevState => {
      return { 
        users: prevState.users.filter( user => user.id !== id)
      }
    })
  }
  
  renderUserList = () => {
    const {users} = this.state
    return users.map(user => {
      return (<UserListItem
          key={user.id}
          user={user} 
          onClick={this.deleteUser} 
      />)
    })
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
          {this.renderUserList()}
        </ul>
      </div>
    );
  }
}

export default App;