Update an organization

Administrators have the ability to update an organization. Currently, Clerk supports updating an organization name.

The organization name can be updated by calling the update method on the Organization object. In React and Next.js applications, you can use the useOrganization() hook to directly access and update the Organization object.

You can also use the updateOrganization method, which can be accessed from the Backend API.

Usage

This example uses the useOrganization() hook to update the organization name.


import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useOrganization } from '@clerk/nextjs';
 
export default function EditOrganization() {
  const [name, setName] = useState('');
 
  const router = useRouter();
 
  const { organization } = useOrganization();
 
  useEffect(() => {
    if (!organization) {
      return;
    }
    setName(organization.name);
  }, [organization]);
 
  async function submit(e) {
    e.preventDefault();
    try {
      await organization.update({ name });
      router.push(`/organizations/${organization.id}`);
    } catch (err) {
      console.error(err);
    }
  }
 
  if (!organization) {
    return null;
  }
 
  return (
    <div>
      <h2>Edit organization</h2>
      <form onSubmit={submit}>
        <div>
          <label>Name</label>
          <br />
          <input
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button>Save</button>
      </form>
    </div>
  );
}


import { useState, useEffect } from 'react';
import { useOrganization } from '@clerk/react';
 
export default function EditOrganization({ organizationId }) {
  const [name, setName] = useState('');
 
  const { organization } = useOrganization();
 
  useEffect(() => {
    if (!organization) {
      return;
    }
    setName(organization.name);
  }, [organization]);
 
  async function submit(e) {
    e.preventDefault();
    try {
      await organization.update({ name });
      router.push(`/organizations/${organization.id}`);
    } catch (err) {
      console.error(err);
    }
  }
 
  if (!organization) {
    return null;
  }
 
  return (
    <div>
      <h2>Edit organization</h2>
      <form onSubmit={submit}>
        <div>
          <label>Name</label>
          <br />
          <input
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button>Save</button>
      </form>
    </div>
  );
}


<form id="edit_organization">
  <div>
    <label>Name</label>
    <br />
    <input name="name" />
  </div>
  <button>Save</button>
</form>
 
<script>
  async function init() {
    // This is the current organization ID.
    const organizationId = "org_XXXXXXX";
    const organizationMemberships = await window.Clerk.getOrganizationMemberships()
    const currentMembership = organizationMemberships.find(membership 
      => membership.organization.id === organizationId);
    const currentOrganization = currentMembership.organization;
    
    if (!currentOrganization) {
      return;
    }
    
    editOrganization(currentOrganization);
  }
  
  async function editOrganization(organization) {
    const form = document.getElementById("edit_organization");
    const inputEl = form.getElementsByTagName("input")[0];
    if (inputEl) {
      inputEl.value = organization.name;
    }
    
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const inputEl = form.getElementsByTagName("input")[0];
      if (!inputEl) {
        return;
      }
      try {
        await organization.update({ name: inputEl.value });
      } catch (err) {
        console.error(err);
      }
    });
  }
  
  init();
</script>