JSFiddle - React, Tailwind, and code Playground

by Simon

JavaScript

render() {
  const canChangeSomeEntity = this.props.permissions.isAllowed('changeSomeEntity');
  const viewSomeEntity = this.props.permissions.isAllowed('viewSomeEntity');

  const userContainerProps = {
      entity: this.props.someEntity,
      onChange: this.props.onSomeEntityChange,
      onSave: this.handleSave,
      canEdit: canChangeSomeEntity,
  };

  return <div className="cool-user-list">
    { viewSomeEntity ? <List {...userContainerProps}>
      {this.props.users
        .map(user => <UserCard key={user.id} user={user} />)}
    </List> : <PermissionWarning>Some warning</PermissionWarning> }

    {this.props.isLoading === true
      ? <Loading />
      : null}

    {this.props.error !== null
      ? <div className="cool-user-list-error">
        {this.props.error.message}
      </div>
      : null}
  </div>;
}