foo.jsx

const User = props => <p>This would render a user</p>

class Users extends React.Component {
  // has this.state.users which is an array from an API
  // not gonna bother writing the code to fetch that...
  render() {
    return (
      <div>
        <h2>The users</h2>
        <ul>
          {this.state.users.map(u => (
            <li key={u.id}><User user={user} /></li>
          ))}
        </ul>
      </div>
    )
  } 
}

// vs...

class Users extends React.Component {
  // has this.state.users which is an array from an API
  // not gonna bother writing the code to fetch that...
  renderUsers() {
    this.state.users.map(u => (
      <li key={u.id}><User user={user} /></li>
    ))
  }
  
  render() {
    return (
      <div>
        <h2>The users</h2>
        <ul>{this.renderUsers()}</ul>
      </div>
    )
  } 
}