React & Recompose withProps - A simple example of using recompose's withProps

index.jsx

// styles for this are based on Bootstrap 3.3.7
import React, { Component } from "react";

import ReactDOM from "react-dom";

import { withProps } from "recompose";


const users = [
  { "name": "Homer Jay", "status": "pending" },
  { "name": "El Barto", "status": "active" },
  { "name": "SideshowBob", "status": "active" }
];

const User = ({ name, status, button }) =>
  <div className={"panel panel-" + (status==="active" ? "primary" : "warning")}>
    <div className="panel-body">
      This user is {name}
      {
        button ? (<span> - <button className="btn btn-primary">Click</button></span>) : null
      }
    </div>
  </div>
;

const Another = withProps({"button":true })(User);

const renderUsers = (e,i) => {
  const props = {name:e.name, key:e.name, status:e.status};
  return e.status === "active" ? <Another {...props} /> : <User {...props} />;
};


const App = () =>
  <div className="container">
    <div className="row">
      <div className="col-xs-12">
        <h2 className="text-center">App</h2>
        { users.map(renderUsers ) }
      </div>
    </div>
  </div>
;


ReactDOM.render(
  <App />, document.getElementById("app-wrap")
)

Thank you

Nice example. Thanks