function Guard({condition, children}) { return condition ? children : null; }; function guard(condition, Component) { return class Guarded extends React.Component { render() { return condition ? <Component {...this.props} /> : null; } } } function guardWith(condition) { return function(Component) { return guard(condition, Component); } } const AdminComponent = guard(true, props=>{ return <h1>You are an Admin, I think</h1>; }); @guardWith(true) class AdvancedAdminComponent extends React.Component { render() { return <h2>Advanced Admin Component</h2>; } } const root = ( <div> <Guard condition={false}> <h2>Not an Admin!!</h2> </Guard> <Guard condition={true}> <h2>Looks like you are an Admin</h2> </Guard> <AdminComponent /> <AdvancedAdminComponent /> </div> ); ReactDOM.render(root, document.getElementById('container') );