When react act as the v.. composable view with Ramda

ramdareact.js

import React from "react";
import { render } from "react-dom";
import R from "ramda";

const users = [
  { id: 1, name: "foo", points: 45 },
  { id: 2, name: "bar", points: 22 },
  { id: 3, name: "baz", points: 79 },
  { id: 4, name: "bla", points: 54 }
];

// Components

const UsersComponent = users =>
  <ul>
    {users}
  </ul>;
const UserComponent = ({ id, name, points }) =>
  <li key={id}>
    {id} - {name} - points: {points}
  </li>;
const AverageBox = avg =>
  <div>
    The Average points are: {avg}
  </div>;
const Main = ({ RankedUsers, AverageBox }) =>
  <div>
    <h2>Ranking</h2>
    {RankedUsers}
    <hr />
    {AverageBox}
  </div>;

// Tranformations

const RankedUsers = R.compose(
  UsersComponent,
  R.map(UserComponent),
  R.sort(R.descend(R.prop("points")))
);

const DisplayAverageBox = R.compose(AverageBox, R.mean, R.pluck("points"));

const RankedUsersAndAverageDisplay = R.converge(
  (...components) => R.zipObj(["RankedUsers", "AverageBox"], components),
  [RankedUsers, DisplayAverageBox]
);

const App = R.compose(Main, RankedUsersAndAverageDisplay, R.prop("users"));

render(<App users={users} />, document.getElementById("root"));