docbrown/app/javascript/article-form/elements/orgSettings.jsx

import { h } from 'preact';
import PropTypes from 'prop-types';

const orgOptions = (organizations, organizationId) => {
  const orgs = organizations.map((organization) => {
    if(organizationId === organization.id) {
      return(
        <option value={organization.id} selected>{organization.name}</option>
      )
    }
    return (
      <option value={organization.id}>{organization.name}</option>
    )
  })
  const nullOrgOption = organizationId === null ? <option value="" selected>None</option> : <option value="">None</option>
  orgs.unshift(nullOrgOption) // make first option as "None"
  return orgs
}

const OrgSettings = ({ organizations, organizationId, onToggle }) => (
  <div className="articleform__orgsettings">
    Publish under an organization:
    <select name="article[organization_id]" id="article_publish_under_org" onBlur={onToggle}>
      {orgOptions(organizations, organizationId)}
    </select>
  </div>
);

OrgSettings.propTypes = {
  onToggle: PropTypes.func.isRequired,
};

export default OrgSettings;