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)
      }
    })
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
        { 
          this.state.users.map( user => {
            return (
              <UserListItem
                key={user.id}
                user={user} 
                onClick={this.deleteUser} 
              />
            )
          });
        }
        </ul>
      </div>
    );
  }
}

export default App;

Any particular reason for using

this.setState(prevState => {
    return {
        users: prevState.users.filter( user => user.id !== id)
    }
})

over this shorter format?

this.setState(prevState => ({
    users: prevState.users.filter( user => user.id !== id)
}))

Same goes for the map:
this.state.users.map( user => { return (<UserListItem...) } ) vs this.state.users.map( user => (<UserListItem...) )

I always feel better when I can omit a return and a couple parenthesis.. 😄